- 移动端
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(); }); }