移动端css像素和物理像素关系

Question

想问下各位朋友们，假设我有块一厘米×二厘米的手机屏幕，分辨率为10×20，是否意味着我这屏幕一个像素点实际上就是占一平方毫米？如果是的话，那假设分辨率更高，每个像素点占据的地方更小，是否就意味着ppi更高呢？
如果这块屏幕的像素比为1，我css画张10px乘10px的图用这块屏幕看，这张图是不是正好占手机上面一半？
那如果像素比为2的话，是不是只能显示这张图的左半边呢？

pc端的话，我写张1920×1080的页面，只要是1920×1080分辨率的屏幕，是不是不管它是14寸还是40寸，都会被占满呢？

Answer 1

在浏览器环境下对于PC而言是这样的，但在移动端1920×1080的图显示效果取决于设备的DPR(像素比)，DPR为1的情况这个图会占满，DPR为2那这个图就大出一倍。

注：window.devicePixelRatio 就可以获取当前设备的像素比(DPR)即1px等于几个物理像素。

你并不需要去获取设备的物理像素尺寸，那个是近似值不是真实的就那么多。实际在浏览器中的html的vw跟vh取决于window.screen.width跟window.screen.height而不是设备的物理像素。
以iPhone x为例，他的屏幕分辨率为1125x2436，但在浏览器中获取的页面(html)的宽高即window.screen的width跟height为375x812，这个时候你放一张19201080的图就会发现超出页面非常多，这便是因为浏览器的宽高只有375812的原因了。