iOS / 移动 Safari 在 viewport 设置为 user-scalable=no 时仍然缩放？请检查辅助功能设置！

Question

这个问题是关于Mobile Safari的，虽然没有被记录下来，但是我花了很长时间才解决了它。即使我已经设置了<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;"/>，我的iPad网络应用程序仍然允许手动缩放（在浏览器中捏合）。但是这只发生在我的iPad上，而不是iPhone上。同时，我还旋转设备从纵向到横向模式以检查特定方向模式CSS代码，结果非常奇怪：

• 从横向旋转到纵向时没有问题，每个元素的大小和位置都能够合理解释。
• 之后，从纵向旋转回横向时...视口仍然保持为纵向模式下的宽度，也就是说，它被缩放了。我必须手动缩小才能回到全景/视口状态，这应该是不可能的。

- eelkedev

---

有两个设置防止用户缩放，但是有什么好处呢？我只看到了缺点。 - Dmitri Zaitsev

Answer 1

我发现了一个很棒的iPad CSS横竖屏布局演示。它看起来很有前途，但也出现了相同的问题。然而，在第二个iPad上测试时，它完美地解决了问题：没有任何缩放问题。所以，我们认为这与我的特定iPad有关。

然后我想到了：几周前，我调整了可访问性设置。像在OSX中一样对整个界面进行缩放（ctrl+滚动）等等。也许这和移动Safari有关？嗯，事实证明确实如此。

今天我学到了：当启用“可访问性 > 缩放”时，它将覆盖视口设置。

你可以自己试试：在这里找到它：设置 > 通用 > 可访问性 > 缩放

- eelkedev

---

谢谢！非常有帮助 :) - william44isme

这太棒了！终于有一种方法可以处理那些强制我阅读微小文本的恶心网站了。 - Dmitri Zaitsev

Answer 2

作为一个视力有问题的人，我非常依赖于手机网站的缩放功能。现在随着iOS 5的更新，iOS不再忽略用户可缩放设置，于是我突然发现我不能再缩放我经常访问的一半网站了。因此，我代表有视力问题的人，恳请您不要使用viewport meta标签来限制人们缩放您的网站的能力！

- GordonM

---

我也有视力障碍，在使用谷歌搜索时感到很烦人，但你仍然可以使用常规的iOS缩放功能（双指、三指轻点），虽然不像捏合手势那样容易，但可以完成任务，而且不会让开发人员感到烦恼，在很多情况下也不会破坏用户体验。 - Ben

@Ben我会认为对于视力较差的人而言，由于无法进行缩放操作，用户体验已经被破坏了。在使用iOS缩放模式时进行平移比在缩放后的网页上进行平移要困难得多。至于Android，则甚至没有提供操作系统级别的缩放功能，因此您会被卡住。就令开发人员感到恼火而言，他们的职责是使每个人都能获得良好的用户体验，而不仅仅是那些拥有20/20视力的人。在某些地方，不考虑视力障碍者会违反反歧视法律，这是非法的。 - GordonM

我完全同意，但是在无障碍性方面，安卓相比于网络浏览器有更大的问题。自从安卓手机问世以来，我就一直想要一个，但简单地说，我无法阅读短信等内容！像 Google 这样的公司应该更好地了解这一点。而说它会破坏用户体验只是一种借口，并且不应该成为问题，但很多移动 Web 应用程序都是针对特定屏幕大小设计的，因此仅缩放文本可能比破坏布局（例如 GMail 应用程序过去的缩放非常混乱，CSS 不知所措！）更适合用户体验。 - Ben

无障碍性很重要，但这个“答案”最多只应该是一个评论。 - user3850

Answer 3

给大家一个小更新：这个问题已经被苹果公司修复。自iOS 5测试版1以来，缩放辅助功能设置将不再导致viewport元标记被忽略。

- Matthew

---

现在因为这个“修复”，我无法再使用任何限制缩放的移动页面。请不要禁用移动站点上的缩放功能！ - GordonM

Answer 4

注意：使用逗号作为分隔符，而不是分号。逗号作为分隔符的方式更加清晰。请参阅文档页面http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html，他们也使用逗号。至少Chrome会在控制台中显示错误，如果您使用分号。我知道，这不会影响iPad或safari，但如果您可以做到干净利落，为什么不呢？ :)

- Александр Фишер