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

Question

可以找到布局视口和视觉视口的解释here。

我读过 here and here 应该使用

<meta name="viewport" content="width=device-width,initial-scale=1.0">

如果想针对移动设备优化网页。

我想了解这对横向模式下 iphone4 的影响。我认为会发生以下情况：

宽度=设备宽度 iphone4 的设备宽度在横向模式下为 320px（参见 here），即使 iphone 4 在横向模式下的屏幕宽度为 480px。所以布局视口设置为320px。

initial-scale=1.0 这会将 1 CSS 像素设置为 1 个设备像素（参见 here）。现在由于 iphone4 的宽度为 480 设备像素，这对我来说意味着视觉视口为 480 像素宽。

因此，布局视口设置为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-size是相对于viewport的，width:100%和width:320 px一样，见here:

the CSS layout, especially percentual widths, are calculated relative to the layout viewport

我假设我错了，iphone4 可能会以 100% 红色横向显示上述页面 - 但为什么呢？我是不是误会了什么？

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

Answer 1

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

Answer 2

我认为您遇到的问题混淆了 device-width 和 screen/browser 分辨率。

如 example 你 post:

These pixels have nothing to do with the actual pixel density of the device, or even with the rumoured upcoming intermediate layer. They’re essentially an abstract construct created specifically for us web developers.

In other words, width/height mirrors the values of document. documentElement. clientWidth/Height, while device-width/height mirrors the values of screen.width/height. (They actually do so in all browsers, even if the mirrored values are incorrect.)

它们是 Retina 显示屏，区别仅在于 iphone 的像素渲染更大，因此浏览器将渲染 full-screen，即使横向显示 320 像素 device-width。 iphone 的最大问题是这种差异在 portrait/landscape 之间不会改变。

和

You can set the layout viewport’s width to any dimension you want, including device-width. That last one takes screen.width (in device pixels) as its reference and resizes the layout viewport accordingly.

设备像素 (The screen) 不同于 visual viewport

<meta name="viewport" content="width=device-width;initial-scale=1.0" />

device-width 屏幕宽度始终为 100%。

<meta name="viewport" content="width=320px;initial-scale=1.0" />

您应该测试 iphone 是否没有变化，否则 DIV 将横向扩展 out/gap 屏幕

我认为这个来源仅使用 media-query 和 device-width 是正确的（在 iphone 上不可见），因为如果你使用普通的媒体查询，你可以看到有效的 pixel-ratio的浏览器渲染从320px变为480px

max-width is the width of the target display area, e.g. the browser; max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.

If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;

If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.

Answer 3

Mozilla 的视口元标记文档很好地解释了这种行为 (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。

也来自同一文档：

Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape.

我认为行为在 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">

我不喜欢这种技术；我认为在大多数情况下，治疗比疾病更糟糕。

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

What happens if layout viewport is smaller than visual viewport?

css

iphone

viewport