Html 如何在响应式设计中禁用缩放功能?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/13215730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable zooming capabilities in responsive design?
提问by Mo.
How can I disable zoom-in and zoom-out capability in responsive design pages while using iPad, iPhone and/or some other smartphone.
在使用 iPad、iPhone 和/或其他一些智能手机时,如何在响应式设计页面中禁用放大和缩小功能。
Is there any way to control it?
有什么办法可以控制吗?
回答by Adam Stanley
Create a META viewport tag, and set the user-scalableproperty to 'no', like this:
创建一个 META 视口标签,并将user-scalable属性设置为“no”,如下所示:
<meta name="viewport" content="user-scalable=no" />
Updated answer:-
更新的答案:-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
回答by mckenzm
This pretty much discriminates against anyone over 30, suppressing zoom just forces them to use reading glasses. Which may be your intent.
这几乎是歧视 30 岁以上的人,抑制变焦只会迫使他们使用老花镜。这可能是您的意图。
One of the workarounds for such users is to use RDP or VNC to view a desktop browser and "pinch" the view of that.
此类用户的解决方法之一是使用 RDP 或 VNC 查看桌面浏览器并“捏”其视图。
Question should maybe read "how to disable" or "how to suppress". You should of course discern your devices using the user agent string.
问题应该是“如何禁用”或“如何抑制”。您当然应该使用用户代理字符串识别您的设备。
回答by Prem
To Disable Zoom Please Add this Script
要禁用缩放请添加此脚本
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>