美文网首页
移动端的一些坑(不断完善中)

移动端的一些坑(不断完善中)

作者: vavid | 来源:发表于2018-04-28 11:38 被阅读0次

一、ios端的坑

症状:软键盘弹出或者收起,弹窗自动调整定位不准的问题
原因:第一次键盘唤起慢或其它

    $(window).on('resize', function () { 
       $(window).scrollTop(0); 
    });
    $(document.body).on('focusout', 'input', function () {
        $(window).scrollTop(0);
    });
    $(document.body).on('focusin click', 'input', function () {
      var target = this;
      setTimeout(function () {
        document.body.scrollTop = document.body.scrollHeight / 4;
      }, 100);
    });

症状:safari浏览器会将一些后渲染dom的字体变大
原因:Mobile Safari automatically scales text if it thinks the text will render too small

 @media screen and (max-device-width: 480px){
   body{
     -webkit-text-size-adjust: none;
      }
  } 

二、uc浏览器

症状:渲染出一些可搜索词,点击会新开页
原因:有些词被自动渲染成了这副鬼--> <a keyword-hyperlink href="#">XXX</a>
立即干掉它:

 .removeProp('keyword-hyperlink').attr('href', 'javascript:void(0)').css('color', '#666');

三、微信浏览器

症状:后退没有刷新页面
解决办法:

//解决微信内置浏览器回退页面不刷新的bug
window.onpageshow= function(e){
    if (e.persisted || window.performance &&  window.performance.navigation.type == 2) {
    var _url = window.location.href;
    if(_url.indexOf('?') < _url.indexOf('=') ){
        _url += '&';
    }else{
        _url += '?';
    }
      window.location.href = _url +'time='+((new Date()).getTime());
    }
};

四、iphoneX 安全距离设置

@mixin adaptiveIphoneX($direction, $isBoxingSizingSet: true) {
    @supports (padding: max(0px)) {
        @if ($isBoxingSizingSet) {
            box-sizing: content-box !important;
        }
        @if $direction == 'bottom' {
            padding-bottom: constant(safe-area-inset-+$direction) !important;
            padding-bottom: env(safe-area-inset-+$direction) !important;
        }
        @else if $direction == 'top' {
            padding-top: constant(safe-area-inset-+$direction) !important;
            padding-top: env(safe-area-inset-+$direction) !important;
        }
        @else if $direction == 'left' {
            padding-left: constant(safe-area-inset-+$direction) !important;
            padding-left: env(safe-area-inset-+$direction) !important;
        }
        @else if $direction == 'right' {
            padding-right: constant(safe-area-inset-+$direction) !important;
            padding-right: env(safe-area-inset-+$direction) !important;
        }
    }
}

相关文章

  • 移动端的一些坑(不断完善中)

    一、ios端的坑 症状:软键盘弹出或者收起,弹窗自动调整定位不准的问题原因:第一次键盘唤起慢或其它 症状:safa...

  • H5移动端爬坑

    H5移动端爬坑

  • 移动端点击那些事

    简介 这篇文章主要是一些总结的移动端开发的一些坑,以及爬坑方法。 正文 ios-webview点击事件(click...

  • 移动端一些常见坑

    https://github.com/jtyjty99999/mobileTech

  • 移动端的坑

    1、移动端定位最好不要用fixed,用绝对定位absolute。2、移动端会有点透BUG,需要touchstart...

  • 移动端的坑

    1.关于微信手机端IOS系统中input输入框无法输入的问题 把-webkit-user-select:none改...

  • 移动端的坑

    mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 工具类网站 HTML5 与 CSS3 技术...

  • 移动端的坑

    移动端问题,持续补充 问题: select标签和input[type="button"]在真机样式上会有区别。 解...

  • 文集

    若web前端到达了瓶颈,如何冲出重围? 移动端汇总 腾讯移动web知识库移动前端开发指南移动端上遇到的各种坑移动端...

  • ios 调起键盘后点击不了 点击事件错位

    在开发移动端webapp的时候,在微信端ios浏览器中遇到过一个巨坑。 我在做一个移动端登录的页面,页面需要输入手...

网友评论

      本文标题:移动端的一些坑(不断完善中)

      本文链接:https://www.haomeiwen.com/subject/ffqglftx.html