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

2018-04-28  本文已影响0人  vavid

一、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;
        }
    }
}
上一篇 下一篇

猜你喜欢

热点阅读