可以在here中找到有关布局视口和可视视口的说明。
我已阅读应使用的here和here
<meta name="viewport" content="width=device-width,initial-scale=1.0">
是否要针对移动设备优化网页。
我想了解横向模式下iphone4的后果。我认为会发生以下情况：
宽度=设备宽度
即使iphone 4在横向模式下的屏幕宽度为480px，iphone4的设备宽度在横向上为320px（请参见here）。因此，布局视口设置为320px。
initial-scale = 1.0这会将1个CSS像素设置为1个设备像素（请参见here）。现在，由于iphone4的宽度为480个设备像素，因此对我而言，这意味着可视视口的宽度为480px。
因此，布局视口设置为320px，视觉视口设置为480px。这是否意味着网页仅显示在可视视口的前320像素中，其余的160像素留为空白？
举一个更具体的例子：考虑以下网页
<!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>
那么据我所知，这应该只将iphone4横向屏幕上的红色填充为320/480 = 66,66％，因为布局视口的长度为320px，并且div尺寸是相对于视口的， width：100％与width：320 px相同，请参见here：
CSS布局，尤其是百分比宽度，是相对计算的
到布局视口
我以为我错了，而且iphone4可能会以100％红色的横向显示上述页面-但是为什么呢？我误会了吗？
备注：我发现这个问题Can I have more than 320px content in an iPhone, using viewport tag with device-width and initial-scale = 1?与我的问题密切相关，但没有答案。
最佳答案
Mozilla的视口meta标记文档很好地解释了此行为（https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag）
对于设置了初始或最大比例的页面，这意味着width属性实际上转换为最小视口宽度。例如，如果布局需要至少500像素的宽度，则可以使用以下标记。当屏幕的宽度超过500像素时，浏览器将扩大视口（而不是放大）以适合屏幕：
<meta name="viewport" content="width=500, initial-scale=1">
作为扩展，如果
width=device-width解析为320，但屏幕为480像素宽，则浏览器还将布局视口扩展为480。同样来自同一文档：
从纵向更改为横向时，Mobile Safari通常仅缩放页面，而不是像最初加载横向时那样对页面进行布局。
我认为行为在最近的iOS版本中有所改变，但这可能是弄清楚发生了什么的一个令人困惑的因素，因为在某些设备上，当页面以横向加载时与页面加载时布局视口有时会有所不同。页面以纵向加载，然后旋转到横向。
Mozilla继续说：
如果Web开发人员希望在切换iPhone上的方向时比例设置保持一致，则他们必须添加最大比例值以防止这种缩放，这有时会产生有害的副作用，阻止用户放大：
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
我不喜欢这种技术。我认为在大多数情况下，治愈方法比疾病要差。
关于css - 如果布局视口(viewport)小于可视视口(viewport)会怎样？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34576882/