google-chrome - 视口(viewport)设备宽度 : incorrect width/large font in Safari landscape (correct on Chrome)

Question

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

为什么在 Safari 中旋转时字体大小会发生变化？我认为上述元数据足以表明我的网站已针对所有屏幕尺寸进行了优化，不是吗？

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

Answer 1

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

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

Because iOS runs on devices with different screen resolutions, you should use the constants instead of numeric values when referring to the dimensions of a device. Use device-width for the width of the device and device-height for the height in portrait orientation.

显然，该功能非常困惑，以至于他们自己甚至无法正确记录它!

LMFTFY:

使用 device-width 作为设备的宽度，使用 device-height 作为纵向方向的height 宽度。

事实证明，确实存在一个无 JavaScript 的变通方法来解决这个宽度，毕竟它实际上不是宽度:

You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.

LMFTFY:

您不需要设置每个视口(viewport)属性。如果仅设置了一部分属性，则 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 摘要仍然提供不正确的信息):

Some browsers will keep the page’s width constant when rotating to landscape mode, and zoom rather than reflow to fill the screen. Adding the attribute initial-scale=1 instructs browsers to establish a 1:1 relationship between CSS pixels and device-independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width.

总结:

-<meta name = 'viewport' content = 'width = device-width' />
+<meta name = 'viewport' content = 'initial-scale = 1' />