最近做了个小测试，验证 CSS 中的 px 和实际设备屏幕像素的映射关系，记录一下过程。
初始测试
加载本地 html 文件：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<style>
.invoice-box {
margin: 0;
padding: 0;
background-color: #2f44ff;
width: 645px;
height: 100px;
}
</style>
</head>
<body>
<div class="invoice-box">
</div>
</body>
</html>
在像素宽度为 1290 的模拟器（iPhone 14 Pro Max）上运行。
- 预期：
色块显示占屏幕的一半。 - 实际情况：
宽度 645px 的色块显示宽度超过了屏幕的一半，接近 2/3。 - 结论：
CSS 中的 px 和移动端的物理像素并不相等，存在映射关系（默认情况下，在 pc 中一个 css 像素 == 一个物理像素）。这里涉及到一个概念“视口”，移动端的网页默认将视口设置为 980 像素（css像素）。
计算得出 645px 确实占 980px 接近 2/3。
测试二
将色块的宽度改为 980px ，验证测试一的结论：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<style>
.invoice-box {
margin: 0;
padding: 0;
background-color: #2f44ff;
width: 980px;
height: 100px;
}
</style>
</head>
<body>
<div class="invoice-box">
</div>
</body>
</html>
- 预期：
色块满屏显示。 - 实际情况：
色块宽度和屏幕宽度相同，但左边有空白间距。 - 结论：
WKWebView 默认添加了间距。
测试三
给 body 设置 style：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<style>
.invoice-box {
margin: 0;
padding: 0;
background-color: #2f44ff;
width: 980px;
height: 100px;
}
</style>
</head>
<body style="margin: 0;padding: 0;">
<div class="invoice-box">
</div>
</body>
</html>
实际效果符合预期。
测试四
将 viewport 的宽度设置为 980px，看看是不是测试一结论所说的默认值：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<meta name="viewport" content="width=980px;">
<style>
.invoice-box {
margin: 0;
padding: 0;
background-color: #2f44ff;
width: 980px;
height: 100px;
}
</style>
</head>
<body style="margin: 0;padding: 0;">
<div class="invoice-box">
</div>
</body>
</html>
- 实际效果
符合预期。980px 确实是默认值。 - 猜测
浏览器会默认计算缩放比例，将 980px 映射成屏幕宽度。
测试五
发现 viewport 可以设置 initial-scale，设置为 1 、1.316326（物理像素宽度1290/980）、0.438775（逻辑像素宽度430/980）看看什么效果：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<meta name="viewport" content="initial-scale=0.438775;">
<style>
.invoice-box {
margin: 0;
padding: 0;
background-color: #2f44ff;
width: 980px;
height: 100px;
}
</style>
</head>
<body style="margin: 0;padding: 0;">
<div class="invoice-box">
</div>
</body>
</html>
-
设置为 1 的实际效果：
色块宽度超过屏幕宽度，有滚动条可以滚动。 -
设置为 1.316326 的实际效果：
色块宽度超过屏幕宽度，有滚动条可以滚动。 -
设置为 0.438775 的实际效果：
色块宽度等于屏幕宽度。右侧有很细小的空白（精度导致，设置色块宽度 430px 和 initial-scale为 1 可以验证）。 -
结论：
没设置缩放比例时，浏览器会默认设置缩放比例，以达到当前页面不会出现横向滚动条的目的。initial-scale的取值是，屏幕的逻辑像素（不是物理像素）除以 view-port 的 width。
scale 实际就是CSS 像素和设备逻辑像素的比例（PC 端则是 CSS 像素和物理像素的比例），从而影响物理像素的呈现。
测试六
发现 view port 的 width 可以设置为 device-width：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<style>
.invoice-box {
margin: 0;
padding: 0;
background-color: #2f44ff;
width: 430px;
height: 100px;
}
</style>
</head>
<body style="margin: 0;padding: 0;">
<div class="invoice-box">
</div>
</body>
</html>
通过修改色块的 width ，可以测出 device-width 等于 430px，即设备的逻辑像素宽度。
如果 width 和 scale 冲突，会怎样呢？
小结
- CSS 像素，在 PC 下等于物理像素，在移动端则等于逻辑像素，但是实际效果受 viewport 的 width 和 scale 设置的影响。
- viewport 的 width 可以设置为 device-width ，等于设备的逻辑像素宽度。
- 没有设置 viewport 的 initial-scale 时，移动端的 viewport 的 width 默认值为 980px（CSS 像素）。
- 没有设置 viewport 的 initial-scale 时，移动端浏览器内核会自动计算比例，以达到当前页面不会出现横向滚动条的目的。
- scale 的计算是屏幕的逻辑像素（不是物理像素）除以 view-port 的 width。
- WKWebView 默认会添加间距，可以设置 body 的 style 为 "margin: 0;padding: 0;"去除。
移动端元素布局
- 使用 vw（视口宽度）
相对于视口宽度，100vw 就是满屏。
缺点是，需要自己进行计算，特别是除不尽的情况，会逼死强迫症。 - 使用 %
相对于父元素的宽度，100% 宽度等于父元素宽度（没设置 margin、padding、border的情况）。
缺点是，需要自己进行计算，另外需要考虑有设置 margin、padding、border 的情况，如 100% 不等于父元素宽度。 - 设置 viewport 的 width 并使用设计稿的尺寸
设置 viewport 的 width 为设计稿的页面宽度，缩放比例由设备自动设置，则可以直接使用元素的设计尺寸，不用计算转换。
缺点是：横屏时实际效果不是预期效果，因为横屏时的逻辑像素宽度和竖屏的不同。
同时设置 viewport 的 width 和 scale，可以规避横屏的问题，但是元素宽度如果设置为具体值无法达到预期效果，只能设置 % 或 vw。
不同场景下考虑使用不同的方式处理，如不考虑竖屏的情况，方式三似乎是最佳的。
其他概念
layout viewport、visual viewport、ideal viewport
结论
参考
https://www.cnblogs.com/psyduck/p/14347706.html
https://www.cnblogs.com/iifeng/p/11199359.html
网友评论