移动设备上的可视视口与布局视口 [英] Visual viewport vs Layout viewport on mobile devices

问题描述

我刚刚阅读了关于视口的好文章，这让我留下了一对夫妇

布局视口的宽度和高度等于任何
可以以最大缩小模式显示在屏幕上

我不太明白这意味着什么。当他们说最大化缩小模式时，这是否意味着布局视口对于不同的HTML是不同的（并且不是针对iPad，Xoom等不同设备的）？

其次，我创建了一个演示页面来测量这两个视口。 （请在iPhone / iPad上查看以获取正确的值。）

据我所知，可以通过设置元视口标签来更改布局视口，但是也更改视觉视口 - 为什么是这样？它说，可视视口是当前显示在屏幕上的页面的一部分，因此我的理解是，可视视口不应受到元视口设置的影响。

解决方案

布局视口和视觉视口都以CSS像素为单位进行测量。这是一个重要的区别。与设备上的物理像素不同，CSS像素用于保持内容的尺寸相对恒定和受控，然后设备将CSS像素转换为设备像素。

了解CSS像素和设备像素之间的差异可能有助于理解和回答您的问题。

1. 布局视口的尺寸实际上是内容的初始尺寸（以CSS像素为单位）。

   
   
   

   布局视口用于最好地确定最初如何定位和渲染内容。它与设备的缩放级别无关。通过说......任何可以在最大缩小模式下显示在屏幕上，我认为他暗指布局视口的尺寸不变;无论当前的可视视口如何，它的大小始终相同。

可视视口只是页面的可视区域 - 同样在CSS像素。如果放大页面，则会增加CSS像素的大小，这自然会减少可以装入设备的CSS像素的数量。这就是为什么当您缩放时视觉视口的尺寸缩小。




视觉视口不能大于页面上的内容。



内容的尺寸主要由布局视口决定。



布局视口的尺寸由元视口规则设置。因此，视觉视口的尺寸应该随着元视口规则的变化而变化。






---





您自问（注释）后：






为什么当内容明显比布局视口更宽时，视觉视口正在伸展以适应所有这些内容？不应该有滚动条？


不，因为您只是向浏览器指示布局视口的初始尺寸应该是，而不是视觉视口。



如果您希望可视视口的尺寸在网页加载时不调整为内容的全宽度，请将 initial-scale = 1 meta-viewport声明中的属性。





---





Mozilla开发人员中心关于视口元标记： https://developer.mozilla.org/en/mobile/viewport_meta_tag




I've just read a nice article on viewport which left me with a couple questions regarding Visual viewport vs Layout viewport on mobile devices.

the width and the height of the layout viewport are equal to whatever can be shown on the screen in the maximally zoomed-out mode

I did not quite understand what that means. When they say "maximally zoomed-out mode", does that mean that the layout viewport is different for different HTMLs (and not specific to different devices like iPad, Xoom, etc)?

Secondly, I've created a demo page to measure these two viewports. (Please view this on an iPhone/iPad to get the correct values.)

I understand that the layout viewport can be changed by setting the meta viewport tag, but that also changes the visual viewport--why is that? It says that the visual viewport is the part of the page that’s currently shown on-screen, so my understanding was that the visual viewport should not be affected by the meta viewport setting.

解决方案

Both the layout viewport and visual viewport are measured in CSS pixels. This is an important distinction to make. As opposed to the physical pixels on the device, CSS pixels are used to keep dimensions of the content relatively constant and controlled, and the device then translates CSS pixels into device pixels.

Understanding the difference between CSS pixels and device pixels may assist in the understanding and answering of your questions.

1. The layout viewport's dimensions are effectively the initial dimensions of the content (in CSS pixels).

   The layout viewport is used to best determine how to position and render the content initially. It is independent of the device's zoom level. By saying "...whatever can be shown on the screen in the maximally zoomed-out mode", I think he's alluding to the point that the layout viewport's dimensions are unchanging; it will always be the same size, irrespective of the current visual viewport.

2. The visual viewport is just the viewable area of the page -- again, in CSS pixels. If you zoom in on a page, you're increasing the size of the CSS pixels, which naturally reduces the number of CSS pixels that can fit on the device. That's why the visual viewport's dimensions shrink when you zoom.

   The visual viewport cannot be any larger than the content on the page.

   The content's dimensions are largely dictated by the layout viewport.

   The layout viewport's dimensions are set by the meta-viewport rule.

   Therefore, the visual viewport's dimensions should change in reaction to changes in the meta-viewport rule.

---

You have since asked (in comments):

Why is it that when there's content that's explicitly wider than the layout viewport, the visual viewport is stretching to fit all of that in? Shouldn't there be a scrollbar?

No, because you're only indicating to the browser what the initial dimensions of the layout viewport should be, not the visual viewport.

If you want the visual viewport's dimensions to not adjust to the full width of the content on page load, set the initial-scale=1 property inside the meta-viewport declaration.

---

There's a fantastic read over on the Mozilla Dev Centre about the viewport meta tag: https://developer.mozilla.org/en/mobile/viewport_meta_tag

这篇关于移动设备上的可视视口与布局视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！