参考链接:高清图片在不同移动端设备上的显示效果
- 由于pc端和移动端的分辨率不同,在pc端1px表示一个物理像素,而移动端,根据屏幕的分辨率不同而屏幕的宽度相同时,这时候1px就不等于一个物理像素了。因此会出现模糊的现象。
- window.devicePixelRati= 逻辑像素/ 物理像素
- 物理像素(设备像素):是显示器真正的像素点,我们可以将屏幕看成由一个一个的小灯组成,而1物理像素===1个小灯
- 逻辑像素(设备独立像素):是操作系统定义的一种像素单位。screen.width/height
例如:
早期的移动设备,只有物理像素,没有设备独立像素,在不缩放的前提下,CSS 中的 1px 就代表着 1 个物理像素。比如 iphone3的物理像素是 320 * 480,那么 width: 320px;的元素将会占满 iphone3 的屏幕宽度。
从 iphone4开始,苹果公司便推出了所谓的 Retina 屏,物理像素变成 640 * 960,但是屏幕尺寸没有变化,也就是说单位面积上的物理像素的数量增加了,或者说屏幕密度增加了。如果还按照原来那样,1px CSS 像素由 1个物理像素来渲染, 那么 width: 320px; 的元素只会占据半个屏幕的宽度。原来在 iphone3 上能够占满屏的网页,在 iphone4 上只会占一半的屏幕,同时 font-size: 20px; 的字体在 iphone4 上的尺寸也会缩小。 为了让同一个网页在iphone4 和 iphone3 上的有相同的显示效果,引入了独立像素的概念。iphone4 的独立像素为 320 * 480,是iphone4 的物理像素的一半,和 iphone3 的物理像素一样。也就是说,iphone4 上的 1 个独立像素 == 2个物理像素。在 iphone4 上,在不缩放的前提下,CSS 中的 1px 便由 1 个独立像素来渲染,相当于 2个物理像素。这样,width: 320px; 的元素由 320 个独立像素来渲染,也就是由 640 个物理像素来渲染,正好占满iphopn4 的屏幕宽度。font-size: 20px; 的字体在 iphone3 和 iphone4 上的尺寸也相同,只不过在iphone4 上的字体更清楚。
所以,我们要根据设备的像素比采用2x或者nx的图片,来保证图片的清晰度。