85

我想在移动设备上禁用捏合和缩放。

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

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

4

10 回答 10

186

编辑：因为这不断得到评论，我们都知道我们不应该这样做。问题是我该怎么做，而不是我应该这样做。

将此添加到您的移动设备中。然后用百分比来做你的宽度，你会没事的：

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

为不能使用视口的设备添加这个：

<meta name="HandheldFriendly" content="true" />
于 2012-07-27T14:06:10.187 回答
16

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

于 2018-09-06T10:23:56.413 回答
14

这就是我所需要的： 

<meta name="viewport" content="user-scalable=no"/>
于 2015-01-29T03:29:37.357 回答
13

对于所有说这是一个坏主意的人，我想说这并不总是一个坏主意。有时不得不缩小才能看到所有内容非常无聊。例如，当您在 iOS 上输入输入时，它会缩放以使其位于屏幕中央。之后您必须缩小，因为关闭键盘不起作用。我也同意，当您花费大量时间制作出色的布局和用户体验时，您不希望它被缩放弄乱。

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

于 2014-10-22T08:07:04.060 回答
9

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

于 2017-12-18T10:46:49.450 回答
5

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
于 2018-08-30T08:12:56.247 回答
5

我想你可能会追求的是 CSS 属性touch-action。你只需要这样的 CSS 规则：

html, body {touch-action: none;}

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

于 2020-04-03T09:35:16.730 回答
4

IE有它自己的方式：一个css属性，-ms-content-zooming。在身体上将其设置为 none 或其他东西应该禁用它。

禁用捏合放大IE10

http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx

于 2014-06-18T09:10:08.067 回答
0

尝试使用 min-width 属性。让我给你解释一下。假设屏幕宽度为 400px 的设备（例如）。放大时，字体会变得越来越大。但是 box 和 div 的宽度保持不变。如果你使用最小宽度，你可以避免减少你的 div 和 box。

于 2015-09-08T12:48:40.187 回答
0

不确定这是否有帮助，但我使用角锤模块解决了捏/缩放问题（我想避免用户在我的 webapp 上进行缩放）：

在我的 app.component.html 中，我添加了：

<div id="app" (pinchin)="pinchin();">

在我的 app.component.ts 中：

  pinchin() {
      //console.log('pinch in');
  }
于 2020-09-29T11:26:25.787 回答