epe*_*leg 6 css mobile viewport viewport-units
我正在尝试确保在设置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像素和设备像素不是一回事.width: 160px在CSS中设置内容时的像素数与CSS像素有关,这与设备的实际像素几乎没有关系.
移动浏览器(在相当现代的智能手机上)创建一个"虚假"视口,即模拟桌面宽度的浏览器大小,也缩小以适应屏幕.这个虚假视口的测量值通常大约为800-1000 CSS像素宽(例如,iPhone使用980像素).这是为了确保未优化的网站在手机上仍然显示正常,因为您可以放大特定部分等.
当您使用元视口标记时width=device-width,您告诉设备您的网站适合在任何视口大小上查看,并且您不希望进行"假桌面"测量.
相反,浏览器应将屏幕上适合的CSS像素数设置为该设备的"理想"像素数.在旧的iPhone上,实际上是320像素.在具有视网膜屏幕的iOS设备上,CSS像素与设备像素比率不同,因此屏幕宽度为640px,但理想的CSS像素数仍然只有320.在其他智能手机上,测量结果不同 - 通常是智能手机上300到500像素的任何东西.
如果您希望您的布局适应CSS像素的数量,您可能最好不要使用特定的像素测量值并使用百分比.无论您需要使用多少CSS像素,视口的50%将始终为视口的50%.