布局视口css宽度属性

Question

我读过这篇文章A tale of two viewports

在这篇文章中，作者写道：

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

“重点是：浏览器选择了布局视口的尺寸，使其在完全缩小模式下完全覆盖屏幕（因此等于视觉视口）。”

我不明白以下段落：

“现在您可以尝试设置html {width：320px}。现在元素会缩小，并且所有其他元素都会缩小，现在需要100％的320px。这在用户放大时起作用，但最初不是当用户遇到缩小的页面时，大部分都不包含“

如果设备的屏幕尺寸大约为320像素，那么布局视口也是如此，如果html元素的css宽度设置为320px，为什么元素会缩小？

由于

Answer 1

  

如果设备的屏幕尺寸大约为320像素，那么布局视口也是如此，如果html元素的css宽度设置为320px，为什么元素会缩小？

您的移动设备上的默认视口为ca 980px，如果不重置，则使用元标记<meta name="viewport" content="width=device-width">（或任何其他内容）。

移动浏览器会自动缩放您的页面，因此980px的大小适合屏幕，使您的320px只有三分之一。