禁用视口缩放iOS 10+的Safari浏览器？
我已经将我的iPhone6 Plus升级到iOS 10 beta版本，并发现在移动Safari中，您可以通过双击或缩小IGNORING meta标签中的user-scalable=no代码来缩放任何网页。 我不知道这是一个错误还是function。 如果它被认为是一个function，我们如何禁用视口缩放iOS 10 Safari？
在iOS11发布更新，iOS 11 safari仍然不尊重user-scalable=no元标记。
这是iOS 10中的一项新function。
从iOS 10 beta 1发行说明：
- 为了提高Safari中网站的可访问性，即使网站在视口中设置了
user-scalable=no，用户也可以捏合缩放。
我希望我们很快会看到一个JS插件，以某种方式禁用这个插件。
可以防止iOS 10中的网页缩放，但是这将涉及更多的工作。 我认为这样的观点是，一定程度的困难应该阻止货物邪教的开发者将“用户可扩展=否”放到每个视口标签中，并使视觉受损的用户不必要地困难。
不过，我希望看到苹果改变他们的实施，以便有一个简单的（元标签）方法来禁用双击到缩放。 大部分困难都与这种相互作用有关。
你可以停止捏这样缩放：
document.addEventListener('touchmove', function (event) { if (event.scale !== 1) { event.preventDefault(); } }, false);
请注意，如果任何更深的目标对该事件调用stopPropagation，则该事件将不会到达该文档，并且此侦听器将不会阻止缩放行为。
禁用双击缩放是类似的。 您可以在上次点击的300毫秒内禁用文档上的任何点击：
var lastTouchEnd = 0; document.addEventListener('touchend', function (event) { var now = (new Date()).getTime(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; }, false);
如果你没有正确设置你的表单元素，关注一个input将会自动缩放，而且由于你大多已经禁用了手动缩放，现在几乎不可能取消缩放。 确保input的字体大小大于等于16px。
如果您试图在本机应用程序的WKWebView中解决此问题，上面给出的解决scheme是可行的，但这是一个更好的解决scheme： https ://stackoverflow.com/a/31943976/661418。 正如其他答案中所提到的，在iOS 10 beta 6中，Apple现在已经提供了一个标志，以表彰meta标签。
2017年5月更新：我用一个更简单的“检查event.scale touchmove”的方法取代了旧的'检查触摸长度在touchstart'禁用pinch-zoom的方法。 应该对每个人更可靠。
看起来，这个行为应该是在最新的testing版本中改变的，在编写本文时这个testing版本是testing版本6。
从iOS 10 Beta 6的发行说明：
现在，
WKWebView默认为考虑user-scalable=no从视口。WKWebView客户端可以提高可访问性，并允许用户通过将WKWebViewConfiguration属性ignoresViewportScaleLimits设置为YES来缩放所有页面。
但是，在我的（非常有限的）testing中，我还不能确认是这种情况。
编辑：validation，iOS 10 Beta 6尊重user-scalable=no默认为我。
我尝试了以前的关于捏到缩放的答案
document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, false);
不过有时候，当event.touches.length> 1的时候屏幕仍然会缩放，我发现最好的方法是使用touchmove事件，以避免手指在屏幕上移动。 代码将如下所示：
document.documentElement.addEventListener('touchmove', function (event) { event.preventDefault(); }, false);
希望它会有所帮助。
检查触摸事件中的比例因子，然后防止触摸事件。
document.addEventListener('touchmove', function(event) { event = event.originalEvent || event; if(event.scale > 1) { event.preventDefault(); } }, false);
我已经能够在个别元素上使用touch-action CSS属性来解决这个问题。 尝试设置touch-action: manipulation; 通常点击的元素，如链接或button。
我花了大约一个小时寻找一个更强大的JavaScript选项，并没有find一个。 恰巧，在过去的几天里，我一直在用hammer.js （Hammer.js是一个可以让你轻松操纵各种触摸事件的库），而且大部分时候都不在我正在做的事情上摆弄。
有了这个警告和理解，我绝不是一个JavaScript专家，这是我提出的一个解决scheme，基本上利用hammer.js捕捉捏缩放和双击事件，然后login和丢弃它们。
确保你的页面中包含了hammer.js，然后尝试将这个javascript粘贴到某个地方：
< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script > < script type = "text/javascript" > // SPORK - block pinch-zoom to force use of tooltip zoom $(document).ready(function() { // the element you want to attach to, probably a wrapper for the page var myElement = document.getElementById('yourwrapperelement'); // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan var hammertime = new Hammer(myElement, { prevent_default: false, touchAction: "pan" }); // pinch is not enabled by default in hammer hammertime.get('pinch').set({ enable: true }); // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action hammertime.on('pinch pinchend pinchstart doubletap', function(e) { console.log('captured event:', e.type); e.preventDefault(); }) }); </script>
我们可以通过注入一个样式规则并拦截缩放事件来获得我们想要的一切：
$(function () { if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return $(document.head).append( '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>' ) $(window).on('gesturestart touchmove', function (evt) { if (evt.originalEvent.scale !== 1) { evt.originalEvent.preventDefault() document.body.style.transform = 'scale(1)' } }) })
✔禁用缩放。
✔禁用双击缩放。
✔滚动不受影响。
✔禁用水龙头突出显示（在iOS上按照样式规则触发）。
注意：根据自己的喜好调整iOS检测。 更多在这里 。
向lukejackson和Piotr Kowalski道歉，他们的答案以修改后的forms出现在上面的代码中。
听起来很奇怪，至less对于iOS 10.2的Safari来说，如果您的元素或其任何祖先具有下列其中一项，则双击缩放将会被魔法禁用：
- 一个onClick监听器 – 它可以是一个简单的noop。
-
cursor: pointer在CSS中设置的cursor: pointer
我在iOS（iPhone 6，iOS 10.0.2）的页面上检查了所有上述答案，但没有成功。 这是我的工作解决scheme：
$(window).bind('gesturestart touchmove', function(event) { event = event.originalEvent || event; if (event.scale !== 1) { event.preventDefault(); document.body.style.transform = 'scale(1)' } });
在以下情况下，意外缩放趋于发生：
- 用户双击界面的一个组件
- 用户使用两个或多个数字（捏）与视口进行交互
为了防止双击行为，我发现了两个非常简单的解决方法：
<button onclick='event.preventDefault()'>Prevent Default</button> <button style='touch-action: manipulation'>Touch Action Manipulation</button>
这两个都阻止Safari（iOS 10.3.2） 放大button。 正如你所看到的，只有一个是JavaScript，另一个只是CSS。 适当使用。
这里是一个演示： https ： //codepen.io/lukejacksonn/pen/QMELXQ
我还没有试图阻止捏行为，但主要是因为我倾向于不为networking创build多点触摸界面，其次，我想到了包括原生应用程序UI在内的所有界面都应该“缩放”在地方。 我仍然devise，以避免用户不得不这样做，不惜一切代价使您的用户界面可以访问他们。
发现这个简单的工作，似乎阻止双击放大：
// Convert touchend events to click events to work around an IOS 10 feature which prevents // developers from using disabling double click touch zoom (which we don't want). document.addEventListener('touchend', function (event) { event.preventDefault(); $(event.target).trigger('click'); }, false);
我想出了一个非常天真的解决scheme，但它似乎工作。 我的目标是防止意外的双击被解释为放大，同时保持捏缩放工作的可访问性。
这个想法是在双击中测量第一touchstart和第二touchend之间的时间，然后如果延迟太小，则将最后的touchend解释为点击。 虽然防止意外缩放，这种方法似乎保持列表滚动不受影响，这是很好的。 不知道我是否还没有错过任何东西。
let preLastTouchStartAt = 0; let lastTouchStartAt = 0; const delay = 500; document.addEventListener('touchstart', () => { preLastTouchStartAt = lastTouchStartAt; lastTouchStartAt = +new Date(); }); document.addEventListener('touchend', (event) => { const touchEndAt = +new Date(); if (touchEndAt - preLastTouchStartAt < delay) { event.preventDefault(); event.target.click(); } });
灵感来自静默和约瑟夫的回答 。
