css - 元视口(viewport)和宽度=设备宽度与百分比尺寸

Question

我试图确保我正确理解 Meta viewport 标签在设置 width=device-width 时的工作方式。

在移动设备上工作是否正确？
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">像素单位的使用是否(或应该)被视为在 320 像素宽的网格上给出？即宽度为 160px 的元素会占据屏幕的 (160/320 = 50%)？

在桌面浏览器上运行时，此行为似乎不起作用，所以假设我想在移动设备和桌面设备上获得相同的设计，我应该/可以使用百分比还是 vw/vh单位？

Answer 1

首先要意识到 CSS 像素和设备像素不是一回事。在 CSS 中设置 width: 160px 时的像素数与 CSS 像素有关，与设备的实际像素关系不大。

移动浏览器(在相当现代的智能手机上)会创建一个“假”视口(viewport)，它模拟桌面宽度的浏览器大小，也会缩小以适合屏幕。这个假视口(viewport)的测量值通常约为 800-1000 CSS 像素宽(例如，iPhone 使用 980px)。这是为了确保未优化的网站在手机上仍然显示正常，因为您可以放大特定部分等。

当您将元视口(viewport)标签与 width=device-width 一起使用时，您是在告诉设备您的网站适合在任何 视口(viewport)尺寸上查看，并且你不想要“假桌面”测量。

相反，浏览器应该将适合屏幕的 CSS 像素数设置为该设备的“理想”像素数。在旧 iPhone 上，这实际上是 320 像素。在具有视网膜屏幕的 iOS 设备上，CSS 像素与设备像素的比率不同，因此屏幕宽度为 640px，但理想的 CSS 像素数仍然只有 320。在其他智能手机上，测量值有所不同 -在智能手机上通常为 300 - 500 像素。

如果您希望您的布局适应 CSS 像素的数量，最好不要使用特定的像素测量值并使用百分比。无论您必须使用多少 CSS 像素，视口(viewport)的 50% 始终是视口(viewport)的 50%。