Html 在移动 Web 上禁用双指缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11689353/
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
Disable Pinch Zoom on Mobile Web
提问by Harsha M V
I want to disable Pinch and Zoom on Mobile devices.
我想在移动设备上禁用捏合和缩放。
What configuration should I add to the viewport ?
我应该向视口添加什么配置？
回答by SpaceBeers
EDIT:Because this keeps getting commented on, we all know that we shouldn't do this. The question was howdo I do it, not shouldI do it.
编辑：因为这不断受到评论，我们都知道我们不应该这样做。问题是我该怎么做，而不是我应该做。
Add this into your for mobile devices. Then do your widths in percentages and you'll be fine:
将此添加到您的移动设备中。然后按百分比计算宽度，你会没事的：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Add this in for devices that can't use viewport too:
为不能使用视口的设备添加这个：
<meta name="HandheldFriendly" content="true" />
回答by quemeful
This is all I needed:
这就是我所需要的：
<meta name="viewport" content="user-scalable=no"/>
回答by Thibaut Rey
To everyone who said that this is a bad idea I want to say it is not always a bad one. Sometimes it is very boring to have to zoom out to see all the content. For example when you type on an input on iOS it zooms to get it in the center of the screen. You have to zoom out after that cause closing the keyboard does not do the work. Also I agree that when you put many I hours in making a great layout and user experience you don't want it to be messed up by a zoom.
对于所有说这是一个坏主意的人，我想说它并不总是一个坏主意。有时不得不缩小才能看到所有内容是非常无聊的。例如，当您在 iOS 上输入输入时，它会缩放以使其位于屏幕中央。之后您必须缩小，因为关闭键盘不起作用。我也同意，当您投入大量时间制作出色的布局和用户体验时，您不希望它被缩放弄乱。
But the other argument is valuable as well for people with vision issues. However In my opinion if you have issues with your eyes you are already using the zooming features of the system so there is no need to disturb the content.
但另一个论点对于有视力问题的人也很有价值。但是，在我看来，如果您的眼睛有问题，您已经在使用系统的缩放功能，因此无需打扰内容。
回答by s-f
Unfortunately, the offered solution doesn't work in Safari 10+, since Apple has decided to ignore user-scalable=no. This thread has more details and some JS hacks: disable viewport zooming iOS 10+ safari?
不幸的是，提供的解决方案在 Safari 10+ 中不起作用，因为 Apple 决定忽略user-scalable=no. 这个线程有更多细节和一些 JS 技巧：禁用视口缩放 iOS 10+ safari？
回答by trias
this will prevent any zoom action by the user in ios safari and also prevent the "zoom to tabs" feature:
这将阻止用户在 ios safari 中进行任何缩放操作，并阻止“缩放到选项卡”功能：
document.addEventListener('gesturestart', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
document.addEventListener('gesturechange', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
document.addEventListener('gestureend', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
jsfiddle: https://jsfiddle.net/vo0aqj4y/11/
jsfiddle：https://jsfiddle.net/vo0aqj4y/11/
回答by nafg
IE has its own way: A css property, -ms-content-zooming. Setting it to none on the body or something should disable it.
IE 有它自己的方式：一个 css 属性，-ms-content-zooming。在身体上将它设置为 none 或其他东西应该禁用它。
http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx
回答by some one
回答by Mr Incredible
I think what you may be after is the CSS property touch-action. You just need a CSS rule like this:
我想你可能追求的是 CSS 属性touch-action。你只需要一个这样的 CSS 规则：
html, body {touch-action: none;}
You will see it has pretty good support (https://caniuse.com/#feat=mdn-css_properties_touch-action_none), including Safari, as well as back to IE10.
你会看到它有很好的支持 ( https://caniuse.com/#feat=mdn-css_properties_touch-action_none)，包括 Safari，以及回到 IE10。
回答by Ajay Sharma
Try with min-width property. Let me explain you. Assume a device with screen width of 400px (for an instance). When you zoom in, the fonts gets larger and larger. But boxes and divs remains with same width. If you use min-width, you can avoid decreasing your div and box.
尝试使用 min-width 属性。让我给你解释一下。假设设备的屏幕宽度为 400 像素（例如）。当您放大时，字体变得越来越大。但框和 div 保持相同的宽度。如果使用 min-width，则可以避免减少 div 和 box。
