在手机上禁用双指缩放 Web

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

这就是我所需要的：

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

Answer 4

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

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

Answer 5

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

Answer 6

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

禁用捏合放大 IE10

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

Answer 7

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

html, body {touch-action: none;}

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

Answer 8

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

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

Answer 9

尝试使用 min-width 属性。 让我给你解释一下。 假设设备的屏幕宽度为 400 像素（例如）。 当您放大时，字体变得越来越大。 但框和 div 保持相同的宽度。 如果使用 min-width，则可以避免减少 div 和 box。

Answer 10

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

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

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

在我的 app.component.ts 中：

  pinchin() {
      //console.log('pinch in');
  }

Answer 11

禁用 iOS 双指缩放

window.addEventListener(
  "touchmove",
  function (event) {
    if (event.scale !== 1) {
      event.preventDefault();
      event.stopImmediatePropagation();
    }
  },
  { passive: false }
);

在 Safari 和 Brave 中测试 iOS 15.3。