将<meta name = "viewport" content = "width = device-width"添加到我的自适应HTML5页面后，默认的1em字体会在所有移动设备上以适当且可用的大小显示，包括iOS Safari;但是，将屏幕从垂直纵向旋转到水平横向位置会导致字体大小发生变化（即使界面元素保持不变，页面上的所有内容都会变得过大），这种变化只发生在iOS上的Safari中，并且不适用于Android上的Chrome。
为什么Safari中的字体大小会改变？我认为上面的元数据足以表明我的网站已经过优化，可以对所有屏幕尺寸做出响应，是不是这样呢？
是否需要为iOS Safari指定额外的怪癖？为什么假设我的网站在缩放到device-width时无法被查看，即使它确切地指明了什么？！
答案 0 :(得分：1)
这似乎是iOS MobileSafari中主要比例的类似MSIE的事故;事实上，它甚至比这还要大，因为无论出于何种原因，它显然都没有被Chrome所吸引。
由于iOS在具有不同屏幕分辨率的设备上运行，因此在引用设备尺寸时应使用常量而不是数值。使用
device-width表示设备的宽度，device-height表示纵向高度。
显然，功能是如此令人费解，以至于他们自己甚至无法正确记录它！
LMFTFY：
使用device-width作为设备的宽度，device-height作为 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，则设置这两个属性。如果您练习响应式网页设计，那么您应该只设置{{1 }为1.0，并保留width属性。
，例如，如果需要Safari兼容性，设置initial-scale的常见建议是完全错误的，并且视口属性应该设置为width=device-width。
这似乎在https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en深处得到承认（尽管他们的tl; dr摘要仍然提供了错误的信息）：
某些浏览器在旋转到横向模式时会保持页面宽度不变，并且可以缩放而不是回流来填充屏幕。添加属性initial-scale = 1指示浏览器在CSS像素和与设备无关的像素之间建立1：1关系，而不管设备方向如何，并允许页面利用完整的横向宽度。
总结：
initial-scale = 1.0