想问下各位朋友们,假设我有块一厘米×二厘米的手机屏幕,分辨率为10×20,是否意味着我这屏幕一个像素点实际上就是占一平方毫米?如果是的话,那假设分辨率更高,每个像素点占据的地方更小,是否就意味着ppi更高呢?
如果这块屏幕的像素比为1,我css画张10px乘10px的图用这块屏幕看,这张图是不是正好占手机上面一半?
那如果像素比为2的话,是不是只能显示这张图的左半边呢?
pc端的话,我写张1920×1080的页面,只要是1920×1080分辨率的屏幕,是不是不管它是14寸还是40寸,都会被占满呢?
在浏览器环境下对于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的原因了。
嗯,看分辨率就行