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