禁用浏览器的缩放功能
解决方案
在html
文件中的head
里面加上meta
标签
<meta name="viewport" content="width=device-width,initial-scale=1.0 user-scalable=no;" />
width=device-width:页面的宽度适配设备的宽度
initial-scale=1.0:设置默认缩放比例
maximum-scale=1.0:最大缩放比例
user-scalable:禁用缩放
在iOS 10以前和Android都可以通过一行meta标签来禁止页面缩放,但是在IOS10开始meta设置在Safari内无效了
IOS10之后就要使用下面的方法
给body
标签设置一下css属性
body {
touch-action: pan-y pan-x;
}
相关连接
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Viewport_meta_tag