[分享] 关于 devicePixelRatio 的一点经验

[initpub]

背景知识：
屏幕的分辨率越来越高， devicePixelRatio 是“物理像素”和“逻辑像素”（也就是 CSS ）之间的比例。例如我的 iPad 上这个数值是 2 ，也就是一个 CSS 的像素，实际上是用两个设备屏幕像素来显示的（仅仅说长度哈，面积的话是平方啦）。

麻烦事：
所以网页如果没有针对这个数值优化，图片会看起来比较模糊。咋办？用 JS 脚本优化，这个数值大，就加载清晰度更高的图片。或者直接就加载高清图片——多耗点流量。

更麻烦的问题：
要是由于种种原因，没有高清图片，怎么办？例如这个：
http://initpub.com/img/i2c-a.jpg
（这是电子仪器的截图，原始图片就巴掌大——直接显示就模糊，长宽除以二就太小）

解决办法：
我是这么处理滴…… devicePixelRatio 如果大于 1.5 （例如 iPad 的数值是 2 ），长宽仅仅除以 1.5 。这样看上去不模糊，但是又不会面积太小。

演示：
http://initpub.com/
我在 devicePixelRatio=1 的 PC ， devicePixelRatio=1.5 的 安卓， devicePixelRatio=2 的 iPad 测试过了，效果还不错。
相关 JS 代码在页面结尾（第一张图片，也就是“ document.images[0]”，是跳过的，因为它清晰度足够高）

那个看贴要回帖哈，这事我倒腾了好一阵 :-)