禁止HTML页面在移动端双击放大
文章描述：
在制作网站页面后，放到服务器用手机测试，会发现在双击页面的时候网站页面会放大，页面在直接进行访问的时候不会被放大，只有点击的时候才会被放大，这时需要在页面里面设置不允许放大。
这里将用到HTML的meta标签来设置，meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放，代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
initial-scale
initial-scale是初始缩放的比例，默认是1.0,这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，如果你设置为“2.0”，那么这个页面就会放大为2倍。
maximum-scale
maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
user-scalable
user-scalable是否允许用户进行缩放，值为 “no” 或 “yes”, no 代表不允许，yes 代表允许
完成以上步骤后我们在安卓手机百度浏览器、QQ浏览器上面测试没得问题，但是换到苹果手机IOS safari浏览器上进行测试，发现双击页面，页面还是会放大，那么在苹果手机上面怎么处理呢，我们可以阻止click事件的触发，代码如下：
$(function(){
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault()
}
});
document.addEventListener('gesturestart', function(event) {
event.preventDefault()
});
})然后我们再在苹果手机上面用safari浏览器上进行测试，会发现再次点击时不会被放大了。
发布时间：2021/08/12
发表评论