高清显示屏原理及设计方案

接近年底了，又到产品们赶KPI的时间，开发也跟着辛苦，于是连续加班了4个星期，项目总算有点起色，也终于挤出点时间，写篇文章，just for fun ~

显示屏原理，之前在团队内做过的一个类似的分享，因为上次有园友问了我手机端css sprite的设计原理，不知道手机端的图片为什么是用2倍大，背景定位又是怎么计算的呢？其实主要是对retina显示不了解，今天重新整理下，针对它的原理以及它在移动端HTML5页面的设计方案，分享给大家~

首先玩个游戏，大家用手机扫描如下二维码，看看自己手机的 devicePixelRatio 值，扫描后，点击"确定"或者"好"，可看到真假乔布斯~

您的手机看到哪个乔布斯呢？devicePixelRatio值分别为1.0、1.5、2.0对应下图，那么你是如果1.5及以上，那么恭喜，你的手机显示屏是高清分辨率的；如果是1.0，你懂的~

简单整理下高清显示屏原理如下：

随着苹果的 retina显示屏推出以来，很多厂商也开始推出自己的高清显示屏，如三星手机、魅族手机、小米电视机等，而目前市场的移动设备大都是高清显示屏了，其实它们的显示原理都是来自苹果的retina显示屏，相信把高清显示屏叫做 retina显示屏一点也不为过分。

如小米3的高清显示屏，5英尺的屏幕下分辨率高达1920*1080

了解高清显示屏的原理后，我们可以想象有2张图片在不同的2部手机中，一部是普通显示屏，一部是高清显示屏，在同样大小的屏幕上，高清显示屏中的位图会被放大，图片会变得模糊。

如retina显示屏下桥帮主，右边的图片变模糊了，原因是Retina 显示屏呈现的对比度是普通显示屏的 4 倍，显示的像素点由1个变为4个，也就是说图片被放大了一倍，从而变得模糊~

我们可以了解到 retina显示屏中图片被放大的倍数高达，而其实各种高清显示屏放大的倍数是不同的，有、1.5:1、、，目前最多的是 2:1，而 HTC Butterfly、Nexus 5、Samsung Galaxy S4、Sony Xperia Z 这个几个系列的移动设备，图片被放大的倍数高达

显示屏和高清显示器

想到文章开头的游戏的 devicePixelRatio 值，通过它的数值来区分普通显示屏和高清显示器，关于 devicePixelRatio ，这里推荐大家看这篇文章《》，讲得非常好~

简单介绍下 devicePixelRatio ，它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素

例如iPhone4S，分辨率为：960×640，取屏幕宽度计算，物理像素640px，设备独立像素320px，那么，devicePixelRatio 值为 640px / 320px = 2，又如iPhone3，计算出来的 devicePixelRatio 值为

那么，通过计算 devicePixelRatio 的值，是可以区分普通显示屏和高清显示器，当当devicePixelRatio值

为了更好的提升用户体验，节省移动端的流量，针对不同的显示屏，我们可以采取不用的方案，保证图片在不同显示屏幕下正常展现，这个方法跟设计原生APP中针对不同分辨率采用使用不同图片的原理相似~

通过判断 devicePixelRatio 的值来加载不同尺寸的图片

由于3.0的手机目前比较少，3.0也加载一张2倍的图片是可以接受的。那么，通过上面的方案，我们不是需要设计2套图片，甚至是3套图片呢？

具体还是要看产品需求的用户群、维护成本、产品急需上线等来设计方案，例如用户群大都是高端手机来的，全部都采用加载一张2倍的图片也是可以接受的~

本文建议采用加载2套图片~