如何在Mobile Safari上禁用视口缩放？

Question

我已经尝试了所有这三个无济于事:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

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

每个都是我通过谷歌搜索或SO搜索推荐的不同值,但是'user-scalable = X'值似乎都没有工作

我也尝试用逗号分隔值而不是分号,没有运气.然后我尝试只提供用户可扩展的值,仍然没有运气.

UPDATE

从Apple的网站得到这个,它的工作原理:

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

原来问题是非标准引号,因为我从使用它们的网站复制了元标记,哎呀

Answer 1

您的代码将属性双引号显示为精美的双引号.如果您的实际源代码中存在花哨的引号,我猜这就是问题所在.

这适用于iOS 4.2中的Mobile Safari.

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

Answer 2

对于寻找iOS 10解决方案的人来说,user-scaleable=no在Safari for iOS 10中被禁用.原因是Apple试图通过允许人们放大网页来改善可访问性.

从发行说明:

为了提高Safari网站的可访问性,即使网站在视口中设置了user-scalable = no,用户现在也可以进行缩放.

据我所知,我们很幸运.

Answer 3

@mattis是正确的,iOS 10 Safari不允许您使用用户可伸缩属性禁用缩放缩放.但是,我在"gesturestart"事件中禁用了preventDefault.我只在iOS 10.0.2的Safari上验证了这一点.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

Answer 4

使用 CSStouch-action属性是最优雅的解决方案。在 iOS 13.5 和 iOS 14 上测试。

要禁用捏缩放手势和双击缩放：

body {
  touch-action: pan-x pan-y;
}

如果您的应用程序也不需要panning，即滚动，请使用：

body {
  touch-action: none;
}

Answer 5

我使用以下代码在 iOS 12 中运行它：

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

使用第一个 if 语句，我确保它只会在 iOS 环境中执行（如果它在 Android 中执行，滚动行为将被破坏）。另外，请注意passive设置为的选项false。

Answer 6

for iphones safari直到iOS 10"viewport"不是解决方案,我不喜欢这种方式,但我已经使用了这个javascript代码,它帮助了我

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

Answer 7

user-scalable=0

这不再适用于iOS 10. Apple删除了该功能.

除非你制作大平台应用程序,否则你现在无法在iOS上禁用缩放网站.

Answer 8

尝试将以下内容添加到head-tag:

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

另外

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

最后,无论是作为样式属性还是在css文件中,为基于webkit的浏览器添加以下文本:

html {
    -webkit-text-size-adjust: none
}

Answer 9

我设法通过将以下内容添加到 HTML 标题来阻止这种行为。这适用于移动设备，因为桌面浏览器在使用鼠标滚轮时支持缩放。这在桌面浏览器上没什么大不了的，但考虑到这一点很重要。

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

以及 CSS 样式表的以下规则

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

Answer 10

实际上，Apple 在最新的 iOS 版本上禁用了 user-scalable=no。我试过作为指导，这种方式可以工作：

body {
  touch-action: pan-x pan-y;
}

Answer 11

在IOS 10.3.2中工作正常

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

谢谢@arthur和@aleclarson