我正在尝试确保在设置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单位？
答案 0 :(得分：5)
首先要意识到CSS像素和设备像素并不是一回事。在CSS中将内容设置为width: 160px时的像素数与CSS像素有关，这与设备的实际像素几乎没有关系。
移动浏览器（在相当现代的智能手机上）创建一个“虚假”视口，即模拟桌面宽度的浏览器大小，也会缩小以适应屏幕。这个虚假视口的测量值通常大约为800-1000 CSS像素宽（例如，iPhone使用980像素）。这是为了确保未优化的网站在手机上仍然显示正常，因为您可以放大特定部分等。
当您使用带有width=device-width的元视口标记时，您告诉设备您的网站适合在任何视口大小上查看，并且您不希望“假桌面“测量。
相反，浏览器应将屏幕上适合的CSS像素数设置为该设备的“理想”像素数。在旧的iPhone上，实际上是320像素。在具有视网膜屏幕的iOS设备上，CSS像素与设备像素比率不同，因此屏幕宽度为640px，但理想的CSS像素数仍然只有320.在其他智能手机上，测量结果不同 - 通常是智能手机上300到500像素的任何东西。
如果您希望布局适应CSS像素的数量，最好不要使用特定的像素测量值并使用百分比。无论您需要使用多少CSS像素，视口的50％将始终为视口的50％。
答案 1 :(得分：0)
通常，绝对不需要这些有害的声明：
maximum-scale=1, user-scalable=no
我的眼睛不是很好，经常发现网页上使用的字体很小。如果网站阻止我进行缩放以便能够阅读它，那会更烦人吗？
如果你仍然不这么认为 - 请仔细阅读这篇文章：http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
从那里引用（强调我的）：
设置最大比例意味着设置最大变焦。在访问信息是最重要的网站（大多数（如果不是全部）网站）的网站上，设置
maximum-scale=1将不允许用户缩放。如果您有一个响应式网站，这可能看起来不重要，但是当用户可能需要缩放时会出现很多情况：小体型字体（至少，根据用户的需要），检查一些细节照片等仅出于审美原因，不要触发辅助功能问题。
此参数无法放大或缩小，并且甚至比
maximum-scale更差。如果有一个非常特殊的理由使用它（例如，您正在编写Web应用程序并且需要避免缩放表单输入），请尝试使用JavaScript添加和删除它，仅用于您要修复的操作。无论如何，请记住智能手机用户用于放大和缩小任何网站，因此填写表单后必须缩小可能是默认行为，您可能不必修复它
现在想象一下这个组合破坏者：一个非响应式网站（固定布局，大约960px宽度），带有一个视口标签，如
<meta name="viewport" content="..., maximum-scale=1, user-scalable=no">
恭喜，您的网站缩小到左上角的第一个300px或400px，用户无法缩小，访问信息的唯一方法是耐心地以300px宽度的片段查看网站。一个额外的标签搞砸了整个体验。