在移动网络上禁用缩放缩放

Question

我想禁用移动设备上的捏合和缩放.

我应该在视口中添加什么配置？

链接:http://play.mink7.com/n/dawn/

Answer 1

编辑:因为这一直在评论,我们都知道我们不应该这样做.问题是我该怎么做,我不应该这样做.

将其添加到您的移动设备中.然后以百分比表示您的宽度,你会没事的:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

为无法使用视口的设备添加此项:

<meta name="HandheldFriendly" content="true" />

Answer 2

这将阻止用户在 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/

Answer 3

我想你可能想要的是 CSS 属性touch-action。你只需要一个像这样的 CSS 规则：

html, body {touch-action: none;}

您会看到它有很好的支持（https://caniuse.com/#feat=mdn-css_properties_touch-action_none），包括 Safari，以及 IE10。

Answer 4

这就是我所需要的:

<meta name="viewport" content="user-scalable=no"/>

Answer 5

对于那些说这是个坏主意的人我想说它并不总是坏事.有时必须缩小以查看所有内容是非常无聊的.例如,当您在iOS上输入输入时,它会缩放以使其位于屏幕中央.你必须在那之后缩小,因为关闭键盘不起作用.另外我同意,当你花费很多时间来制作出色的布局和用户体验时,你不希望它被变焦搞砸了.

但另一个论点对于有视力问题的人也很有价值.但是在我看来,如果你的眼睛有问题,你已经在使用系统的缩放功能,因此不需要打扰内容.

Answer 6

不幸的是,提供的解决方案在Safari 10+中不起作用,因为Apple决定忽略它user-scalable=no.这个帖子有更多的细节和一些JS黑客:禁用视口缩放iOS 10+ safari？

Answer 7

在这里找到您可以使用user-scalable=no：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">