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浏览器不再识别meta 的viewport了
通过强制
(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();
});
})()