将<meta name = "viewport" content = "width = device-width" 添加到我的响应式HTML5 页面后，默认的1em 字体会在所有移动设备（包括iOS Safari）上以适当且可用的大小显示；但是，将屏幕从垂直纵向旋转到横向横向位置会导致字体大小发生变化（页面上的所有内容都变得太大，即使界面元素保持不变），并且这种变化仅发生在 iOS 上的 Safari 中，并且不在 Android 上的 Chrome 中。
为什么在 Safari 中旋转时字体大小会发生变化？我认为上面的元数据足以表明我的网站已经过优化，可以响应所有屏幕尺寸，不是吗？
是否必须为 iOS Safari 指定一个额外的怪癖？为什么假设我的网站在缩放到 device-width 时无法被查看，即使这正是指定的内容？！
【问题讨论】：
标签： google-chrome safari mobile-safari viewport device-width
这似乎是 iOS MobileSafari 中类似 MSIE 的重大事故；事实上，它甚至比这更大，因为无论出于何种原因，它显然没有被 Chrome 实际拾取。
由于 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' />
【讨论】：