当视口设置为 user-scalable=no 时,iOS/移动 Safari 仍然会缩放?检查辅助功能设置!
这个特定的 Mobile Safari(看似不可能且未记录)问题让我今天花了很长一段时间,当我弄清楚它时,我正要在这里发布一个有关它的问题。
问题:虽然我设置了 我的 iPad 网络应用程序仍然允许手动缩放(在浏览器中捏合)。 -- 但只能在我的 iPad 上使用,不能在 iPhone 上使用。
此外,我还会在纵向模式和横向模式之间旋转设备,以检查特定的方向模式 CSS 代码,这会产生奇怪的结果:
- 从横向旋转到纵向没有问题,所有内容的大小和位置都有意义。
- 之后,从纵向旋转回横向,视口保持与纵向模式一样宽,即。它被放大(缩放)。我必须手动缩小才能返回完整图片/视口。这应该是不可能的。
This specific Mobile Safari (seemingly impossible and yet undocumented) problem kept me going for a long long time today, and I was just about to post a question about it here when I figured it out.
The problem: While I had set <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;"/>
my iPad web-app still allowed manual zooming (pinching in the browser). -- But only on my iPad, not on my iPhone.
Also I would rotate the device between portrait to landscape modes to check the the specific orientation-mode CSS codes, which gave strange results:
- Rotating from Landscape to Portrait there was no problem, the sizes and placement of everything kind of made sense.
- After that, rotating from Portrait back to Landscape and.. the viewport stayed as wide as it was in Portrait mode, ie. it was zoomed (scaled) in. I had to manually zoom out to get back to the full picture / viewport. Which should be impossible.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
然后我找到了很棒的 具有横向/纵向模式的 iPad CSS 布局 演示。它看起来很有希望,但给了我同样的问题。然而,在第二台 iPad 上进行测试时,它运行得非常完美:没有任何缩放问题。所以,我们认为这与我的特定 iPad 有关。
然后我突然意识到:几周前我摆弄了辅助功能设置。放大整个界面,就像在 OSX 中一样(ctrl+滚动)等。也许这以某种方式链接到 Mobile Safari?嗯,事实证明确实如此。
今天我学到了:当可访问性>时缩放已打开,这会否决元视口设置。
您自己尝试一下吗?您可以在这里找到它:
Settings >一般>辅助功能>缩放
I then found the great iPad CSS Layout with Landscape/Portrait Modes demo. It looked promising, but gave me the identical problem. Yet while testing this on a second iPad it worked perfect: no zooming problem whatsoever. So, we figured it had to do with my specific iPad.
Then it struck me: Weeks ago I fiddled around with the accessibility settings. Zooming in on the entire interface like you can do in OSX (ctrl+scroll) etc. Maybe this was linked to Mobile Safari in some way? Well, it turns out it is.
Today I learned: When Accessibility > Zoom is turned on, this overrules the meta viewport settings.
Try this out yourself? You'll find it here:
Settings > General > Accessibility > Zoom
作为有视力问题的人,我非常依赖缩放移动网站的功能。现在,随着 iOS 5 的更新,iOS 无法再忽略用户可扩展设置,我突然发现我无法再使用一半经常使用的网站,因为我无法缩放它们。
因此,我代表有视力问题的人们恳求您不要使用视口元标记来限制人们缩放您的网站的能力!
As someone with vision problems I'm heavily reliant on being able to zoom mobile sites. Now with the update to iOS 5 there's no way of getting iOS to ignore the user-scalable setting anymore and I suddenly discover I can't use half the web sites I use regularly anymore because I can't zoom them.
So, on behalf of people with vision problems, I beg you to please not use viewport meta tags to restrict peoples' ability to zoom your site!
为您提供一点更新:Apple 已修复此问题。从 iOS 5 beta 1 开始,缩放辅助功能设置将不再导致
viewport
元标记被忽略。Just a little update for you: this has been fixed by Apple. As of iOS 5 beta 1, the Zoom accessibility setting will no longer cause the
viewport
meta tag to be ignored.注意:使用逗号作为分隔符,而不是分号。最干净的方式是用逗号作为分隔符。请参阅文档页面 http://developer。 apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html,它们也使用逗号。如果您使用分号,Chrome 至少会在控制台中显示错误。我知道,这不会影响 iPad 或 safari,但如果你能做到干净,为什么不呢? :)
Note: use commas as separators, not semicolons. The clean way are commas as separators. See the documentation page http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html, they do use commas too. And at least Chrome shows errors in the console if you use semicolons. I know, that this does not affect iPad or safari, but if you can do it clean, why not? :)