如何禁用移动Safari浏览器缩放?
我已经尝试了所有这三个无济于事:
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />
每个都是不同的值,我发现通过谷歌search或SOsearch推荐,但没有'用户可伸缩= X'值似乎工作
我也试着用逗号分隔值而不是分号,没有运气。 然后,我尝试只有用户可扩展的价值目前,仍然没有运气。
UPDATE
从苹果的网站得到这个,它的工作原理:
<meta name="viewport" content="width=device-width, user-scalable=no" />
事实certificate,问题是非标准的报价,因为我已经从使用它们的网站复制元标签,哎呀
您的代码显示属性双引号作为花式双引号。 如果您的实际源代码中出现花哨的引号,我会猜测是这个问题。
这适用于我在iOS 4.2的移动Safari。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
对于寻找iOS 10解决scheme的user-scaleable=no
,iOS 10的Safari中禁用了user-scaleable=no
。原因在于苹果正试图通过允许用户放大网页来提高可访问性。
从发行说明 :
为了提高Safari中网站的可访问性,即使网站在视口中设置了user-scalable = no,用户也可以捏合缩放。
所以据我所知,我们倒霉了。
编辑 :通过@jeremypress检查答案可能的解决方法:)
@mattis是正确的,iOS 10的Safari不会允许你禁用捏缩放用户可伸缩属性。 但是,我得到它在'gesturestart'事件禁用使用preventDefault。 我只在iOS 10.0.2的Safari上validation过。
document.addEventListener('gesturestart', function (e) { e.preventDefault(); });
iPhone的Safari浏览器到iOS 10“视口”不是一个解决scheme,我不喜欢这种方式,但我已经使用这个JavaScript代码,它帮助我
document.addEventListener('touchmove', function(event) { event = event.originalEvent || event; if(event.scale > 1) { event.preventDefault(); } }, false);
尝试将以下内容添加到您的头标记中:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
另外
<meta name="HandheldFriendly" content="true">
最后,无论是作为样式属性还是在你的CSS文件中,为基于webkit的浏览器添加以下文本:
html { -webkit-text-size-adjust: none }
在Safari 9.0及更高版本中,您可以使用视口元标记中的缩小缩放,如下所示
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
有时候内容中的其他指令可能会让你对苹果最好的猜测看法如何布局你的页面,所有你需要禁用捏缩放是
<meta name="viewport" content="user-scalable=no" />
user-scalable=0
这不再适用于iOS 10. Apple删除了该function。
现在没有办法可以禁用iOS上的缩放网站,除非你做总平台的应用程序。
这在IOS 10.3.2中正常工作
document.addEventListener('touchmove', function(event) { event = event.originalEvent || event; if (event.scale !== 1) { event.preventDefault(); } }, false);
谢谢@arthur和@aleclarson
为了符合WAI WCAG 2.0 AA可访问性要求,您绝不能禁用缩放。 (WCAG 2.0:SC 1.4.4调整文本级别AA)。 您可以在此处阅读更多内容: 移动可访问性:WCAG 2.0和其他W3C / WAI准则如何应用于移动设备,2.2缩放/放大
这一个应该在iPhone上工作
<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">