移动端常见安卓、IOS兼容问题

一、禁止IOS缩放

　　1.适用安卓、IOS10以下

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>

　　viewport——>视口

　　width=device-width——>页面宽度等于设备宽度

　　initial-scale=1.0——>页面初始缩放比例1:1

　　minimun-scale=1.0，maximum-scale=1.0——>页面最小、最大缩放比例

　　user-scalable=no——>禁止用户缩放

 

　　2.IOS10以上

    <script>
        window.onload = function () {
            // 禁止双指缩放
            // touchstart:触摸开始，多点触控，后面的手指同样会触发
            // touches：位于当前屏幕所有手指列表
            document.addEventListener('touchstart', function (event) {
                if (event.touches.length > 1) {
                    event.preventDefault();
                }
            });
            // 禁止手指双击缩放
            var lastTouchEnd = 0;
            document.addEventListener('touchend', function (event) {
                var now = (new Date()).getTime();
                if (now - lastTouchEnd <= 300) {
                    event.preventDefault();
                }
                lastTouchEnd = now;
            }, false);
            // ios双指手势操作事件
            document.addEventListener('gesturestart', function (event) {
                event.preventDefault();
            });
        }
    </script>

 

二、禁止蒙板下的穿透滚动

　　way1（IOS10以上不生效）：

        // 蒙板显示时：
        $('body').css({ overflow: 'visible' })
        // 蒙板隐藏时
        $('body').css({ overflow: 'hidden' })

 　　way2（蒙板内同样不可滚动）：

function aboutdefault(e) {
    e.preventDefault();
}
// 蒙板显示时：
document.body.addEventListener('touchmove', aboutdefault, { passive: false });
// 蒙板隐藏时
document.body.removeEventListener('touchmove', aboutdefault, { passive: false });

 　　way3：

        // 蒙板显示时
        let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
        $('body').css({ 'position': 'fixed', top: -top + 'px' })
        // 蒙板隐藏时
        let top = -parseInt($('body').css("top"))
        $('body').css({ 'position': 'static' })
        document.body.scrollTop = document.documentElement.scrollTop = top

 

三、移除IOS中input原生样式

    /* 去除系统默认appearance的样式,常用于IOS下移除input标签原生样式 */
     -webkit-appearance: none;

 

四、IOS软键盘收起时让页面弹回

        // focusout失去焦点触发，与blur不同，focusout子元素失去焦点也会触发事件
        // $('.weui-cells_form').on('blur', '.weui-input', function () {
        $('.weui-cells_form').on('focusout', function () {
            let u = navigator.userAgent;    // 只读字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。
            let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
            if (isiOS) {
                setTimeout(function () {
                    window.scrollTo(
                        0,
                        $('.weui-cells_form').offset().top  //  弹回的节点的位置
                    )
                }, 100)
            }
        })

　　不过个人认为top这个取值并不是很好，只是一个大概，因为它并没有弹回触发软键盘时的位置

　　可以尝试聚焦时获取document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset，失焦时用该值作为滚回的top位置，未测试……

 

五、IOS返回不刷新

  　　　 var isPageHide = false;
        window.addEventListener('pageshow', function () {
            if (isPageHide) {
                window.location.reload();
            }
        });
        window.addEventListener('pagehide', function () {
            isPageHide = true;
        }); 

 

六、IOS下巴

　　具有下巴的ios，页面内容会下坠，或与下巴重叠

　　给固定定位在底部、和页面最外层的body或div，添加样式padding-bottom: env(safe-area-inset-bottom)即可解决

　　该样式生效时，会覆盖原来的padding-bottom，需要的话则需要calc计算，示例原padding-bottom为10px时：则可修改为padding-bottom: env(safe-area-inset-bottom + 10px);

 

 

padding-bottom: env(safe-area-inset-bottom);

 

 

七、IOS滚动

　　ios的overflow滚动存在卡顿和不能触底的问题，所以ios的滚动很有必要配合-webkit-overflow-scrolling: touch;一起使用

.main {
      height: 100%;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
 }