html - <meta name ="viewport"content ="width=device-width"> 在 iOS 的横向模式下做什么？

Question

我正在尝试了解 iOS 上的缩放属性。

1. 根据 Apple's Developer Docs , 声明 <meta name="viewport" content="width=device-width">将告诉 iOS 在页面加载时(纵向模式)将网页缩放为 1:1 像素比。

2. 根据 a presentation由 HTML5Boilerplate 的人员(见幻灯片 13)，device-width将始终对应于 iOS 设备屏幕的较小尺寸，无论设备的方向如何。

3. 因此，如果您在 iOS 中使用 <meta name="viewport" content="width=device-width"> 加载页面在横向握住设备时声明，iOS 将根据屏幕的高度设置视口(viewport)的宽度，从而产生 1.5:1 (iPhone 4s) 或 2:1 (iPhone 5) 的像素比。

我是正确的，还是我误解了 Apple 使用的“宽度”和“设备宽度”的定义？

此外，当 iOS 设备旋转时，视口(viewport)保持什么？是宽度还是比例？它取决于元设置吗？

Answer 1

根据 Apple 的开发者文档:

“类似地，如果您仅指定视口(viewport)宽度，则会推断出高度和初始比例。请注意...横向保持宽度等于设备宽度，这会更改初始比例并具有缩放效果当用户更改为横向时。”

文章指出，无论方向或设备旋转如何，iOS 都会保持相同的视口(viewport)设置。

参见 here ，在“Safari 如何推断宽度、高度和初始比例”下。