浏览器兼容性

154 阅读1分钟

overflow:hidden

iOS Safari 中,如果使用 body { overflow: hidden; } 属性来隐藏页面滚动条,有时候可能不起作用。这是因为 iOS Safari 有一个特殊的行为,它会在键盘弹出时自动添加一个遮盖层,导致 overflow: hidden 失效。

解决办法是在键盘弹出时将 body 固定,例如:

document.body.style.overflow = 'hidden';
document.body.style.position = 'fixed';
document.body.style.height = '100%';
document.body.style.width = '100%';

缩放

一般移动端禁用缩放都是通过meta标签

<html>
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
</head>
</html>

参数:

  • width: 设置viewport的宽度,正整数/字符串 device-width
  • initial-scale: 设置设备宽度与viewport大小之间的缩放,0.0-10.0之间
  • maximum-scale: 设置最大缩放系数,0.0-10.0之间
  • minimum-scale: 设置最小缩放系数,0.0-10.0之间
  • user-scalable: 设置移动设备能否缩放页面,默认yes,yes/no

但是 ios10 及以上 Safari浏览器不再识别metaviewport

通过强制

(function () {
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);
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});
})()