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

【问题标题】：How do you disable viewport zooming on Mobile Safari?如何在 Mobile Safari 上禁用视口缩放？
【发布时间】：2011-05-22 08:31:01
【问题描述】：

这三种方法我都试过了，但都无济于事：

<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;” />

每一个都是我发现 google 搜索或 SO 搜索推荐的不同值，但 'user-scalable=X' 值似乎都不起作用

我还尝试用逗号而不是分号来分隔值，但没有运气。然后我尝试只存在user-scalable 值，仍然没有运气。

更新

从 Apple 的网站上得到这个，它可以工作：

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

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

【问题讨论】：

如果您正在制作游戏，那么控制缩放可能是有效的。然而，在几乎所有其他情况下，强烈建议不要这样做。不幸的是，它已成为许多移动开发人员的标准做法。如果用户想要放大以便能够更轻松地阅读文本等，阻止他们这样做并不是很好。
我们正在禁用基于移动网络的应用程序的缩放。您无法放大原生 iOS 应用程序，并且在我们的 Web 应用程序中不需要它。如果您的网站或应用程序针对移动设备进行了优化，那么您的用户将无需缩放。总是有禁用缩放的用例。它不必总是以一种方式或另一种方式。
是的，我没有遵循以下逻辑：在移动优化网站上禁用缩放是坏事。更糟糕的是让视口意外平移，因为屏幕在一个不需要您缩放的站点上意外平移和缩放输入。实际上，如果您的用户需要放大您的移动优化网站上的内容，那么问题在于设计，而不是缩放不足。
@NathanHornby：禁用缩放的问题是缺乏对用户偏好的尊重。不同的用户喜欢不同的文本大小，视力好的年轻观众可能更喜欢看更多的内容，而视力差的观众不能使用没有大文本的任何东西。其他人患有帕金森症，但视力仍然很好，因此他们更喜欢超大按钮，但通常不会从大文本中受益。
@NathanHornby 这并不意味着设计师一定做错了什么。它只是意味着用户，无论出于何种原因，想要放大。捏缩放是所有触摸屏手机的标准功能。任何拥有这种手机的用户都知道如何使用它。我知道这是一个老问题，但我仍然对那些坚持破坏我手机功能的无所不知的开发人员感到沮丧，因为他们认为这会使他们的设计看起来更好。

标签： html ios zooming mobile-safari viewport

【解决方案1】：

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

这适用于 iOS 4.2 的 Mobile Safari。

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

【讨论】：

这是花哨的引语，我从网站上复制了标签而没有注意到，谢谢指出！
这可能是这里的长尾，但可能值得指出的是，这需要在“顶级”页面上应用。如果您将此元标记应用于 iframe，则除非元标记也应用于最顶部的页面，否则它将不起作用。
为什么有人会创建一个创建精美报价的软件，这超出了我的理解。
@Traubenfuchs：排版。
这是一个相当陈旧的答案，我读到的问题是，如果您将 user-scalable 设置为 no，这将导致可访问性问题。从 iOS 10 开始，它可以正常工作，允许用户根据需要进行缩放，但不能缩放输入框。也不需要设置大字体。

【解决方案2】：

对于寻找 iOS 10 解决方案的人，user-scaleable=no 在 iOS 10 的 Safari 中被禁用。原因是 Apple 正试图通过允许人们放大网页来提高可访问性。

来自发行说明：

为了提高 Safari 中网站的可访问性，用户现在可以即使网站在视口。

据我了解，我们真倒霉。

【讨论】：

Apple 做出了多么糟糕的决定。现在，使用带有“-”和“+”按钮的微调器来减少/增加数字会在 iOS Safari 上反复放大和缩小页面。这些印刷机被解释为双击缩放，无法禁用它。 iOS Chrome 完美运行。令人沮丧。
虽然我做错了这个决定，但作为苹果用户，我真的很高兴，因为我想在许多内部使用小元素的网站中强制使用此功能。
世界将走向地狱
天哪，谁能猜到？苹果做出的另一个荒谬的选择
留给 Apple 来强制每个人使用可访问性“功能”，而不是仅仅在 可访问性 设置中为其添加一个选项...

【解决方案3】：

@mattis 是正确的，iOS 10 Safari 不允许您使用用户可缩放属性禁用捏合缩放。但是，我在“gesturestart”事件中使用 preventDefault 来禁用它。我只在 iOS 10.0.2 的 Safari 上验证了这一点。

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

【讨论】：

在 iOS 10 上，我发现这行得通，但是如果您滚动页面然后在滚动的同时捏合缩放，它允许缩放。然后你会发现自己卡在新的缩放级别，直到你再次滚动。因此，除非您的页面正文不可滚动，否则这看起来不是一个好的解决方案。 :(
一个警告：用户仍然可以双击屏幕，该屏幕将/可以缩放并且不会被此捕获。
有时仍然允许通过双击屏幕进行缩放。 :(
什么是相当于gesturestart的“双击”？ dblclick?
另一个注意事项，如果你想禁用缩放的双击方面。移动 Safari 还支持“触摸动作：操纵”（属于“基本支持”，它会禁用双击事件。此处的文档：developer.mozilla.org/en-US/docs/Web/CSS/touch-action

【解决方案4】：

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

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

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

如果您的应用也不需要平移，即滚动，请使用：

body {
  touch-action: none;
}

【讨论】：

这是我在 IOS 13.6.1 上运行的唯一方法，谢谢！
这是当前答案。
NB 不适用于 iOS 12 及更低版本（仍然很流行）。
我试过没有效果，还是可以放大。 iPhone6sp IOS 13.6(17G68)。
touch-action: pan-x pan-y 不幸的是 janky 和损坏。如果您反复捏合，它仍会在大约 5% 的时间内缩放。

【解决方案5】：

对于直到 iOS 10 的 iphone safari，“视口”不是解决方案，我不喜欢这种方式，但我使用了这个 javascript 代码，它对我有帮助

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

【讨论】：

应该是event.scale !== 1
@aleclarson event.scale > 1 包含条件 event.scale !== 1
@aleclarson 用于防止在 Mobile Safari 上缩放就足够了，我写道我不喜欢这种方式，通常必须使用视口，但在 IOS iphone 6 及更高版本上不是工作（我认为你的 event.scale !== 1 应该更正确，但这一切都不正确，这是一种黑客行为）
@aleclarson 似乎使用 !== 破坏了 Android 4.4 中的原生浏览器； event.scale 未定义。
@JamesPizzurro 是的，你可以使用event.scale !== undefined && event.scale !== 1

【解决方案6】：

我使用以下代码在 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。

【讨论】：

不适用于我的 iOS 12.3.1，这里是测试链接：https://output.jsbin.com/liqiraj
这在 iOS 14.4 上的 Ionic v1 PWA 中为我修复了它！
这可以防止页面缩放，但会破坏自定义手势处理。

【解决方案7】：

user-scalable=0

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

你现在无法在 iOS 上禁用缩放网站，除非你制作粗平台应用。

【讨论】：

太糟糕了...知道他们为什么要删除它吗？
@smt 他们不希望网络体验与应用商店中的应用体验竞争。
@marvindanig 是的......因为他们需要 99 美元的费用来制作一个应用程序，否则该应用程序可以很容易地成为适用于所有平台的更易于访问的网页应用程序。苹果也不喜欢“网络体验”，如果这意味着用户+开发人员可以避开围墙花园。一切都与苹果的权力和金钱有关 :(
实际上可以在较新的 iOS 版本上使用它。看我的回答：stackoverflow.com/a/62165035

【解决方案8】：

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

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

【讨论】：

我在IOS 15上试过了，不行！

【解决方案9】：

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

&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;

CSS 样式表的以下规则

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

【讨论】：

"touch-action" 做这个工作-谢谢

【解决方案10】：

尝试将以下内容添加到您的头部标签中：

<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
}

【讨论】：

【解决方案11】：

这在 IOS 10.3.2 中运行良好

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

谢谢@arthur 和@aleclarson

【讨论】：

iOS 13 将 false 改为 {passive: false}

【解决方案12】：

有时content 标签中的那些其他指令可能会扰乱 Apple 对如何布局页面的最佳猜测/启发式方法，您只需要禁用捏缩放即可。

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

【讨论】：

【解决方案13】：

在 Safari 9.0 及更高版本中，您可以在视口元标记中使用 shrink-to-fit，如下所示

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

【讨论】：

【解决方案14】：

如前所述，该解决方案在 2020 年末基本上可以使用：

document.addEventListener(
    'gesturestart', (e) => e.preventDefault()
);

但不利的一面是，当您滚动时，您仍然可以捏合然后卡住。解决方案是禁用滚动。

body {
    overflow: hidden;
}

但是，如果您仍然希望页面滚动怎么办？您仍然可以将另一个<div> 设置为overflow:auto：

<body>
    <div id='app'></div>
</div>

然后

body {
    overflow: hidden;
}

 #app {
     -webkit-overflow-scrolling: touch;
      height: 100vh;
      height: -webkit-fill-available;
      overflow: auto;
 }

【讨论】：

【解决方案15】：

我愚蠢地有一个以像素为单位的宽度的包装 div。其他浏览器似乎足够智能来处理这个问题。一旦我将宽度转换为百分比值，它在 Safari 移动设备上也能正常工作。很烦人。

.page{width: 960px;}

到

.page{width:93.75%}

<div id="divPage" class="page">
</div>

【讨论】：

【解决方案16】：

为了符合 WAI WCAG 2.0 AA 无障碍要求，您必须从不禁用捏缩放。（WCAG 2.0：SC 1.4.4 调整文本级别 AA）。你可以在这里阅读更多信息：Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile, 2.2 Zoom/Magnification

【讨论】：

这不是一个答案..许多客户还要求阻止缩放..所以我不能把这个作为一般规则
辅助功能缩放不是页面（也不是任何应用程序）的责任。提供可访问的缩放工具是操作系统的责任。现在每个操作系统都提供了这样的功能，它适用于屏幕缩放，它不应该干扰页面本身的缩放，因为这不是为了可访问性而设计的。
这样的东西总是有有效的用例。出于某种原因，几乎所有网络文学似乎都假设网络仅用于制作博客。正如 JavaScript 的 eval() 有有效的用例一样，禁用缩放也是如此。我将它用于与蓝牙扫描仪结合使用的网络应用程序，以防止在扫描条形码时页面缩放。
我完全同意辅助功能建议的目标，但毫无疑问，有时不需要或不需要缩放，甚至可能会破坏用户体验。另外，你知道的，客户。
我想说的是，在 html/javascript 应用程序中，这些准则不适用。毕竟，原生应用可以让你放大和缩小吗？

【解决方案17】：

这个应该在iphone等上工作

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

【讨论】：