我试图确保在设置 width=device-width 时正确理解 Meta 视口标签的工作方式。
如果在使用像素单位的移动设备上工作时
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">被（或应该）视为在 320 像素宽的网格上给出它们，这是否是正确的说法？即宽度：160px 的元素会占据屏幕的（160/320 = 50%）？
在桌面浏览器上运行时，此行为似乎不起作用，因此假设我想在移动设备和桌面设备上获得相同的设计，我应该/可以使用百分比还是vw/vh单位？
首先要意识到 CSS 像素和设备像素不是一回事。在 CSS 中设置某些内容时的像素数与width: 160pxCSS 像素有关，这与设备的实际像素几乎没有关系。
移动浏览器（在相当现代的智能手机上）创建一个“假”视口，它模拟桌面宽度的浏览器大小，它也被缩小以适合屏幕。这个假视口的尺寸通常在 800-1000 CSS 像素宽左右（例如，iPhone 使用 980 像素）。这是为了确保未优化的网站在手机上仍然显示正常，因为您可以放大特定部分等。
当您使用带有 的元视口标签时width=device-width，您是在告诉设备您的网站适合在任何视口大小上查看，并且您不想要“假桌面”测量。
相反，浏览器应该将适合屏幕的 CSS 像素数设置为该设备的“理想”像素数。在旧 iPhone 上，这实际上是 320 像素。在配备 Retina 屏幕的 iOS 设备上，CSS-pixel-to-device-pixel ratio 不同，因此屏幕为 640px 宽，但理想的 CSS 像素数仍然只有 320。在其他智能手机上，测量结果有所不同——通常在智能手机上 300 - 500 像素。
如果您希望您的布局适应 CSS 像素的数量，您最好不要使用特定的像素测量值并使用百分比。无论您必须使用多少 CSS 像素，50% 的视口始终是视口的 50%。
通常情况下，绝对不需要这些有害的声明：
maximum-scale=1, user-scalable=no
我的眼睛不是很好，所以我经常发现网页上使用的字体非常小。如果该网站阻止我缩放以阅读它，还有什么更烦人的呢？
如果您仍然不这么认为 - 请仔细阅读这篇文章：http ://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
从那里引用（强调我的）：
设置最大比例意味着设置最大缩放。在访问信息是重中之重的网站（大多数，如果不是全部，网站）上，设置 a
maximum-scale=1将不允许用户缩放。如果您有一个响应式网站，这似乎并不重要，但是在很多情况下用户可能需要缩放：小字体（至少，对于用户的需要）、检查照片中的一些细节等。不要仅出于美学原因触发可访问性问题。
这个参数去掉了放大或缩小的能力，甚至比
maximum-scale. 如果有一个非常特殊的原因使用它（例如，您正在编写一个 Web 应用程序并且需要避免放大表单输入），请尝试使用 JavaScript 添加和删除它，只是为了您想要修复的操作。无论如何，请记住智能手机用户习惯于放大和缩小任何网站，因此在填写表格后必须缩小可能是默认行为，您可能不必修复它。
现在想象一下组合破坏器：一个非响应式网站（固定布局，大约 960 像素宽度），带有一个视口标签，如
<meta name="viewport" content="..., maximum-scale=1, user-scalable=no">
恭喜，您的网站缩放到左上角的前 300px 或 400px，用户无法缩小，访问信息的唯一方法是耐心地以 300px 宽度查看网站。一个额外的标签搞砸了整个体验。