Question

可以找到布局视口和可视化视口的说明{。{3}}。

我已阅读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像素上，而剩余的160px是空白的？

举一个更具体的例子：考虑以下网页

<!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-size是相对于视口，宽度：100％与宽度：320 px 相同，请参阅here：

CSS布局，尤其是百分比宽度，是相对计算的到布局视口

我假设我错了，iphone4可能会在100％红色的横向上显示上面的页面 - 但为什么呢？我误解了什么吗？

备注：我发现这个问题here与我的问题密切相关，但没有答案。

Answer 1

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

对于设置初始或最大比例的页面，这意味着width属性实际上转换为最小视口宽度。例如，如果您的布局需要至少500像素的宽度，那么您可以使用以下标记。当屏幕宽度超过500像素时，浏览器将展开视口（而不是放大）以适应屏幕：
SELECT t.*,
       AVG(DispenserSales) OVER () as avg_DispenserSales,
       AVG(RefillSales) OVER () as avg_RefillSales
FROM (SELECT YEAR(o.OrderDate) as SalesYear,
             MONTH(o.OrderDate) as SalesMonth,
             SUM(case when c.catid = 1 then od.UnitPrice * od.Quantity end) AS DispenserSales,
             SUM(case when c.catid = 2 then od.UnitPrice * od.Quantity end) AS RefillSales
      FROM . . .
     ) t

通过扩展，如果<meta name="viewport" content="width=500, initial-scale=1">解析为320但屏幕宽度为480像素，则浏览器还会将布局视口展开为480.

同样来自同一份文件：

移动Safari通常只是在从纵向更改为横向时缩放页面，而不是像最初加载到横向中时那样布置页面。

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

Mozilla接着说：

如果网络开发者希望他们的缩放设置在iPhone上切换方向时保持一致，他们必须添加最大比例值以防止这种缩放，这有时会产生不必要的副作用，阻止用户放大：
width=device-width

我不是这种技术的粉丝;我认为在大多数情况下治愈比疾病更糟。

Answer 2

这是因为它是以纵向模式呈现的旋转页面。您将不得不重绘页面。这是类似的question 。

Answer 3

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

与您发布的example一样：

这些像素与设备的实际像素密度无关，甚至与传闻即将推出的中间层无关。它们本质上是一个专门为我们的Web开发人员创建的抽象结构。

换句话说，宽度/高度反映了文档的值。 documentElement。 clientWidth / Height，而device-width / height反映screen.width / height的值。（它们实际上在所有浏览器中都这样做，即使镜像值不正确。）

它们是视网膜显示器，区别仅在于iPhone的较大像素渲染，因此即使在景观中使用320px设备宽度，浏览器也会全屏显示。 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

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


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

如果您使用的是最大宽度，当您更改桌面浏览器的大小时，CSS将更改为不同的媒体查询设置，您可能会看到移动设备的样式，例如触摸友好菜单

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

3 个答案: