如果布局视口小于视觉视口会发生什么？

Question

如果布局视口小于视觉视口会发生什么？

4

您可以在这里找到关于布局视口（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相同，请参见此处：

CSS布局，特别是百分比宽度，是相对于布局视口计算的

我假设我是错误的，iPhone4可能会在横向模式下以100％的红色显示上述页面 - 但为什么？我有什么误解吗？

备注：我发现了这个问题Can I have more than 320px content in an iPhone, using viewport tag with device-width and initial-scale = 1?与我的问题密切相关，但没有答案。

- Adam

3个回答

0

这是因为页面在纵向模式下旋转渲染。您需要重新绘制页面。这里有一个类似的问题。

- Mike Kor

1

我不确定你的意思。当我切换到横屏模式时，页面当然会被重新渲染，但即使在横屏模式下，设备宽度仍为320px而不是480px。我没有看到与您链接的问题相似之处。还是谢谢你的答案。 - Adam

这很奇怪。我曾经遇到过这个问题。在从纵向旋转后，像素宽度仍然相同。而且好像没有按比例缩放宽度以适应屏幕大小。所以我的建议是，在旋转后使用JavaScript手动重新绘制页面。虽然我没有iPhone 4，但我在iPad 1上检查了你的代码，一切正常。 - Mike Kor

我并不是说我经历过这个问题。我只是根据布局视口的定义，期望出现这种行为，但同时它也让我感到奇怪，所以我想知道我的论点是否有缺失或其他问题。我刚刚编辑了我的问题，希望现在更清楚了。谢谢你的帮助。 - Adam

0

我认为你遇到的问题是混淆了设备宽度和屏幕/浏览器分辨率。

就像你发布的示例中所述：

这些像素与设备的实际像素密度或即将推出的中间层甚至没有任何关系。它们本质上是专门为我们网页开发人员创建的抽象构造。

换句话说，width/height反映document.documentElement.clientWidth/Height的值，而device-width/height反映screen.width/height的值（即使镜像的值不正确，在所有浏览器中都是如此）。

它们都是视网膜显示屏，只是来自iPhone的大像素渲染有所区别，所以即使在横屏模式下使用320像素的设备宽度，浏览器也会全屏渲染。 iPhone的一个大问题是这种差异在纵向/横向之间不会改变。

您可以将布局视口的宽度设置为任何尺寸，包括设备宽度。最后一个选项将屏幕宽度（以设备像素表示）作为参考，并相应地调整布局视口的大小。

其中设备像素（屏幕）与视觉视口不同。

<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。

max-width是目标显示区域的宽度，例如浏览器；max-device-width是设备整个渲染区域的宽度，即实际设备屏幕的宽度。

如果您使用max-device-width，则当您在桌面上更改浏览器窗口的大小时，CSS样式不会更改为不同的媒体查询设置；

如果您使用max-width，则当您在桌面上更改浏览器窗口的大小时，CSS将更改为不同的媒体查询设置，并且可能会显示移动设备的样式，例如触摸友好的菜单。

- Emanuele Parisio

我不认为我混淆了它们：iPhone4的屏幕分辨率为320x480像素，设备像素比为2，设备分辨率（独立于设备像素比）为640x960像素。此外，iPhone4横向的设备宽度为320像素（因为它始终返回纵向模式下的屏幕宽度）。我的问题仍然存在：如果我将布局视口设置为320像素，可视视口设置为480像素，那么我不明白为什么这不会导致160像素的间隙。 - Adam

因为我在上一个注释中写过，浏览器分辨率的更改基于将要呈现的设备的宽度，该宽度为480px，但与设备宽度无关。尝试将div的宽度设置为320px而不是100％，您会发现在横向模式下会出现间隙。您没有任何媒体查询来重现此间隙，您需要设置像这样的媒体查询：@media screen and(max-device-width:320px)并在任何非iPhone设备上进行测试，或者如果您想在iPhone上进行测试，则使用@media screen and(max-width:320px)，因为设备宽度不会改变。 - Emanuele Parisio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidcl · Accepted Answer

Mozilla的viewport meta标签文档（https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag）很好地解释了这种行为。

For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">

通过扩展，如果width=device-width解析为320，但屏幕宽度为480像素，则浏览器还将将布局视口扩展到480。

同一文档中还有：

移动Safari在从纵向变为横向时通常只会缩放页面，而不是像在横向加载时那样布局页面。

我认为这种行为在iOS的最近版本中有所改变，但它可能是确定发生了什么的一个混淆因素，因为在某些设备上，当页面在横向模式下加载时，布局视口有时会与页面在纵向模式下加载并旋转到横向模式时不同。

Mozilla接着说：

If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">

我不太喜欢这种技术，我认为在大多数情况下，治疗方法比疾病更加严重。