3

添加<meta name = "viewport" content = "width = device-width"到我的响应式 HTML5 页面后，默认1em字体会在所有移动设备（包括 iOS Safari）上以适当且可用的大小显示；但是，将屏幕从垂直纵向旋转到横向横向位置会导致字体大小发生变化（页面上的所有内容都变得太大，即使界面元素保持不变），并且这种变化仅发生在 iOS 上的 Safari 中，并且不在 Android 上的 Chrome 中。

为什么在 Safari 中旋转时字体大小会发生变化？我认为上面的元数据足以表明我的网站已经过优化，可以响应所有屏幕尺寸，不是吗？

是否必须为 iOS Safari 指定一个额外的怪癖？为什么假设我的网站在缩放到时无法查看，device-width即使这正是指定的内容？！

4

1 回答 1

1

这似乎是 iOS MobileSafari 中类似 MSIE 的重大事故；事实上，它甚至比这更大，因为无论出于何种原因，它显然并没有被 Chrome 实际拾取。

根据https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html：

由于 iOS 运行在具有不同屏幕分辨率的设备上，因此在引用设备的尺寸时应使用常量而不是数值。用于device-width设备的宽度和device-height纵向的高度。

显然，该功能非常混乱，以至于他们自己甚至无法正确记录它！

LMFTFY：

用于设备的device-width宽度和device-height高度纵向宽度。

事实证明，在这个宽度周围确实存在一个无 JavaScript 的解决方法，毕竟不是宽度：

您不需要设置每个视口属性。如果只设置了属性的子集，则 iOS 上的 Safari 会推断其他值。例如，如果您将比例设置为 1.0，Safari 会假定宽度为device-width纵向和device-height横向。因此，如果您希望宽度为 980 像素且初始比例为 1.0，则设置这两个属性。

LMFTFY：

您不需要设置每个视口属性。如果只设置了属性的子集，则 iOS 上的 Safari 会推断其他值。例如，如果您将比例设置为 1.0，Safari 会假定宽度为device-width纵向和device-height横向。所以，如果您希望宽度为 980 像素且初始比例为 1.0，则设置这两个属性。如果您练习响应式网页设计，那么您应该只将 设置initial-scale为 1.0，而不要理会 width 属性。

例如，显然，如果需要 Safari 兼容性，则设置的常见建议width=device-width是完全可笑的错误，而应将 viewport 属性设置为initial-scale = 1.0.

这似乎在https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en得到了深入的承认（尽管他们的 tl;dr 摘要仍然存在信息不正确）：

一些浏览器在旋转到横向模式时会保持页面的宽度不变，并缩放而不是重排以填充屏幕。添加属性 initial-scale=1 指示浏览器在 CSS 像素和与设备无关的像素之间建立 1:1 的关系，无论设备方向如何，并允许页面利用整个横向宽度。

总之：

-<meta name = 'viewport' content = 'width = device-width' />
+<meta name = 'viewport' content = 'initial-scale = 1' />
于 2016-05-10T11:08:13.850 回答