跳至主要內容

移动端适配

像素的分类

设备像素（Device Pixel）

  • 物理概念，也叫物理像素，设备能控制显示的最小单位
  • 屏幕上的真实像素点。iphone6 的设备像素 750 * 1334，也就是说 iphone6 屏幕上有 750 * 1334 个像素点。

设备独立像素（Device Independent Pixel）

  • 逻辑概念，是一个抽象概念，物理上实际并不存在
  • 操作系统定义的一种长度单位。iphone6 的设备独立像素 375 * 667，长宽正好是设备像素的一半。
  • 与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素

CSS像素（CSS Pixel）

  • 逻辑概念，是一个抽象概念，物理上实际并不存在
  • 适用于web编程，指的是我们在样式代码中使用到的逻辑像素，
  • 在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。
  • CSS 中的长度单位，在 CSS 中使用的 px 都是指 CSS 像素。

像素名词

每英寸像素PPI(pixel per inch)

  • ppi，表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素

设备像素比DPR(device pixel ratio)

  • dpr = 设备像素/设备独立像素
  • 以上计算出ppi是为了得到密度分界，获得默认缩放比例，即设备像素比。
  • 例如
    • iPhone4S，分辨率为：960×640，取屏幕宽度计算，物理像素640px，设备独立像素320px，那么，devicePixelRatio 值为 640px / 320px = 2，
    • 又如iPhone3，计算出来的 devicePixelRatio 值为 320px / 320px = 1
  • 通过计算 DPR的值，是可以区分普通显示屏和高清显示器，
    • 当DPR值等于1时（也就是最小值），那么它普通显示屏，
    • 当DPR值大于1(通常是1.5、2.0)，那么它就是高清显示屏

retina高清屏

  • 一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

  • 比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。

    • retina-pixel.png

retina高清屏适配

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

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

img

如何设计高清背景图

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

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

  1. 针对普通显示屏(devicePixelRatio = 1.0、1.3)，加载一张1倍的图片
  2. 针对高清显示屏(devicePixelRatio >= 1.5、2.0、3.0)，加载一张2倍大的图片

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

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

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

设计师和前端工程师之间如何协同

一般由设计师按照设备像素(device pixel)为单位制作设计稿。

前端工程师，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。

Media Queries 适配高清背景图

  • 利用媒体查询结合 DPR可以区分普通显示屏和高清显示屏，并给出了如下CSS设计方案，它是目前兼容性最好的一个方案~
.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */
	background-image: url(img_1x.png);
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5){
  .css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图 */
  	background-image: url(img_2x.png);
  }
}

image-set 适配高清背景图

贡献者: guo