您可以在这里找到关于布局视口(layout viewport)和可视视口(visual viewport)的解释。
我在这里和这里阅读到应该使用标签来控制移动设备上的视口大小。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
如果想要为移动设备优化网页。
我想了解在iPhone4横屏模式下的影响。我认为会发生以下情况:
width=device-width iPhone4在横屏模式下的设备宽度为320像素(参见这里),即使iPhone 4在横屏模式下的屏幕宽度为480像素。因此,布局视口设置为320像素。
initial-scale=1.0 这将一个CSS像素设置为一个设备像素(参见这里)。由于iPhone4有480个设备像素的宽度,因此对我来说,这意味着可视视口宽度为480像素。
因此,布局视口设置为320像素,可视视口设置为480像素。这是否意味着网页仅显示在可视视口的前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%的红色填满屏幕,因为布局视口将获得320像素的长度,而且由于div大小相对于视口,width:100%与width:320px相同,请参见此处:
我假设我是错误的,iPhone4可能会在横向模式下以100%的红色显示上述页面 - 但为什么?我有什么误解吗?CSS布局,特别是百分比宽度,是相对于布局视口计算的
备注:我发现了这个问题Can I have more than 320px content in an iPhone, using viewport tag with device-width and initial-scale = 1?与我的问题密切相关,但没有答案。