-
移动端
web
缩放有两种:双击缩放
、双指手势缩放
。 -
在
iOS 10
之前,iOS
和Android
都可以通过一行meta
标签来禁止页面缩放:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
但
iOS 10
开始,meta
设置在Safari
内无效了,在iOS
的其他浏览器上也会相应出现无法禁止缩放的情况出现。 -
解决办法,在需要禁止缩放的页面导入下面
JS
配置:window.onload = function() { // 阻止双击放大 var lastTouchEnd = 0; document.addEventListener('touchstart', function(event) { if (event.touches.length > 1) { event.preventDefault(); } }); 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(); }); }
JS 解决移动端浏览器(Safari、Alook...)无法禁止缩放问题
最新推荐文章于 2024-08-03 15:58:59 发布
在iOS10之前,通过meta标签可以禁止移动端Web页面缩放,但在iOS10之后,这一方法失效。为了解决这个问题,文中提供了一段JavaScript代码,用于阻止双击和双指手势缩放,确保页面在iOS设备上的缩放行为得到控制。
摘要由CSDN通过智能技术生成