一年又见底了，光阴似水流，总觉得时间太快，在开发移动端网站的时候或多或少会有些觉的细节问题总会困扰着我们，从整体上看来，phone,pad版网站不论是平面设计上还是前端技术都和pc版相差无几，好吧，今天就晒晒这些小问题，让我们在制作这类网站的时候可以更快更好的解决，不要再犯相同的错误：

1、高清屏显示原理

　　高清显示屏起源于retina，它是一种由苹果公司设计和委托制造的显示屏，具备足够高像素密度而使得人体肉眼无法分辨其中单独像素点的液晶屏。

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

1. 一种具备超高像素密度的液晶屏

2. 同样大小的屏幕上显示的像素点由1个变为多个

　　2、高清显示屏下图片变模糊

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

　　看到上图后，你就会知道为什么在phone版制作初期某些手机出现了图标模糊，那么，我们如何解决这个问题呢？——把图片放大再缩小，是的，当我们把图片放大2倍或多倍后，在高清屏中看到就是非常清晰了。

　　3、常见高清显示屏中位图被放大的比例

 　　目前市面上主流的高清屏手机都是2：1，的居多，也有早前一些的1.3：1、1.5：1等等，然而现在新上市的手机已开始支持更高清的显示效果了，如果三星S4已达到3：1，如何区分普通显示屏和高清显示器？——devicePixelRatio

那么哪些浏览器支持这个值呢？(如下图)

　　devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持，随着显示器的发展，这个属性也开始登上了前端技术的舞台。

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

　　那么，通过计算 devicePixelRatio 的值，是可以区分普通显示屏和高清显示器，当devicePixelRatio值等于1时（也就是最小值），那么它普通显示屏，当devicePixelRatio值大于1以(通常是1.5、2.0)，那么它就是高清显示屏

　　4、如何设计高清背景图

　　我们通常的做法是图标放到2倍再缩小一半的方式来支持高清显示

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

.css{
    background: url(../img/bank_ico.png) no-repeat;/* 不支持image-set的显示屏 */ 
    background: -webkit-image-set(
                url(../img/bank_ico.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */
                url(../img/bank_ico_retina.png) 2x);/* 支持image-set的浏览器的[Retina屏幕] */
                
}