可以在此处找到布局视口和视觉视口 我在这里和这里读到，一个人应该使用 如果想要优化用于移动设备的网页。 我想了解这对处于横向模式的iphone4的影响。我认为会发生以下情况： width=设备宽度尽管iphone4在横向模式下的屏幕宽度为480px，但iphone4的横向设备宽度为320px（请参阅此处）。因此布局视口设置为320像素。 初始比例=1.0这将1个CSS像素设置为1个设备像素（请参阅此处）。现在，由于iphone4的设备像素宽度为480，这对我来说意味着视觉视口的宽度为480像素。 因此，布局视口设置为320px，视觉视口设置为480px。这难道不意味着网页只显示在视觉视口的前320像素上，而剩下的160像素是空白的吗？ 举一个更具体的例子：考虑以下网页 那么在我的理解中，这应该只在iphone4的屏幕上用红色填充320/480=66,66%的横向，因为布局视口的长度为320px，并且由于div大小是相对于视口的，宽度：100%与宽度：320 px相同，请参见此处： CSS布局，尤其是百分比宽度，是相对计算的到布局视口 我认为我错了，iphone4可能会以100%红色的横向显示上面的页面，但为什么？我误解什么了吗？ 备注：我发现了这个问题。使用设备宽度和初始比例为1的视口标签，我可以在iPhone中拥有超过320像素的内容吗？这与我的问题密切相关，但没有答案。<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!DOCTYPE html >
<html >
<head>
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
</head>
<body>
<div style='background-color:red;width:100%'>Test</div>
</body>
</html>
Mozilla的viewport元标记文档很好地解释了这种行为(https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)
对于设置初始或最大比例的页面，这意味着宽度属性实际上转换为最小视口宽度。例如，如果布局需要至少500像素的宽度，则可以使用以下标记。当屏幕宽度超过500像素时，浏览器将展开视口（而不是放大）以适应屏幕：
<meta name="viewport" content="width=500, initial-scale=1">
通过扩展，如果width=device-width解析为320，但屏幕为480像素宽，则浏览器也会将布局视口扩展为480。
同样来自同一份文件：
当从纵向更改为横向时，Mobile Safari通常只是缩放页面，而不是像最初以横向加载时那样布置页面。
我认为在最近版本的iOS中，这种行为发生了一些变化，但在弄清楚发生了什么时，这可能是一个令人困惑的因素，因为在一些设备上，当页面以横向加载时，布局视口有时会与页面以纵向加载然后旋转到横向时不同。
Mozilla接着说：
如果网络开发人员希望他们的缩放设置在iPhone上切换方向时保持一致，他们必须添加一个最大缩放值来防止这种缩放，这有时会产生不必要的副作用，即阻止用户放大：
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
我不喜欢这种技术；我认为在大多数情况下，治愈比疾病更糟糕。
这是因为它在纵向模式下旋转页面。您将不得不重新绘制页面。这里也有类似的问题。
我认为您的问题是混淆了设备宽度和屏幕/浏览器分辨率。
如您发布的示例：
这些像素与设备的实际像素密度无关，甚至与传闻中即将到来的中间层无关。它们本质上是专门为我们网络开发人员创建的抽象结构。
换句话说，宽度/高度反映了文档的值。documentElement。clientWidth/Height，而设备width/Height镜像screen.width/hheight的值。（实际上，它们在所有浏览器中都这样做，即使镜像的值不正确。）
它们是视网膜显示器，与iphone的区别仅在于更大的像素渲染，因此即使设备宽度为320像素，浏览器也会渲染全屏。iphone的最大问题是纵向/横向之间的差异不会改变。
和
可以将布局视口的宽度设置为所需的任何尺寸，包括设备宽度。最后一个以screen.width（以设备像素为单位）为参考，并相应地调整布局视口的大小。
其中设备像素（The screen）不同于visual viewport
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
则设备宽度将始终具有100%的屏幕宽度。
<meta name="viewport" content="width=320px;initial-scale=1.0" />
在那里，你应该测试iphone上是否没有变化，或者DIV是否会在横向中扩展屏幕
我认为这个来源只使用设备宽度的媒体查询是正确的（在iphone上不可见），因为如果你使用普通的媒体查询，你可以看到浏览器渲染的有效像素比从320px变为480px
最大宽度是目标显示区域（例如浏览器）的宽度；最大设备宽度是设备的整个渲染区域的宽度，即实际设备屏幕的宽度。
- 如果您使用的是最大设备宽度，当您更改桌面上浏览器窗口的大小时，CSS样式不会更改为不同的媒体查询设置
- 如果您使用的是最大宽度，当您更改桌面上浏览器的大小时，CSS将更改为不同的媒体查询设置，您可能会看到手机的样式，例如触摸友好菜单