[TOC] 身为一个移动web网站的设计师，除非你只是针对某种特定的设备设计，否则你应该会常常碰到这样的问题：如何清楚地了解网站运行设备的屏幕尺寸大小？这个问题一直困扰着移动设备上的设计师。 当然我们需要知道一些概念，了解就行，不至于被这样PPPPPP~~~~弄得头晕： # 必须 移动端Web页面，即常说的H5页面、手机页面、webview页面等。 手机设备屏幕尺寸不一，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。 可以看到经过几年的迭代，iPhone现在也有了多种不同尺寸的屏幕，分辨率也不尽相同，所以对我们做移动端的页面也有了很大的适配要求。 安卓手机屏幕更加多样，并且现在移动端页面设计更加的酷炫，更加多样性，越来越与app页面相似，所以单纯的媒体查询已经很难完成移动端页面的适配，而且媒体查询开发起来也较为麻烦，除非你的移动端的页面较为简单。 所以需要一个更加方便，更加准确兼容不同尺寸的适配方案。 # orientation(设备的方向) **landscape是横向，portrait是纵向。** # 此像素非彼像素 实际上像素分为两种：设备像素和CSS像素 ## 物理像素(physical pixel) 设备屏幕的物理像素，也叫作设备像素(device pixel)，任何设备的物理像素的数量都是固定的。比如iPhone 5的分辨率640 x 1136px。 一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 ## 设备独立像素(density-independent pixel) dip和dp是一个意思，都是Density Independent Pixels的缩写，也叫作密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的**虚拟像素**(例如**CSS像素**)，然后由相关系统转换为物理像素。 ### 逻辑像素，又称为CSS像素 CSS 像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。是为 web 开发者创造的，在 CSS 和 javascript 中使用的一个抽象的层。 每一个 CSS 声明和几乎所有的 javascript 属性都使用CSS像素，因此实际上从来用不上物理像素 ，唯一的例外是`screen.width/height`。 ~~~ //我们通过CSS和javascript代码设置的像素都是逻辑像素 width:300px; font-size:16px; ~~~ 在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是物理像素(physical pixel) 。 所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是我们接下来要说的设备像素比。 ## 设备像素比(device pixel ratio) 在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。**从iphone4开始，苹果公司推出了所谓的retina视网膜屏幕**。之所以叫做视网膜屏幕，是因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。iphone4的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于是`DPR = 2`。其他品牌的移动设备也是这个道理。 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以通过如下公式得到： ~~~ 设备像素比 （dpr）=物理像素（pp） / 设备独立像素（dip）; /*在某一方向上，x方向或者y方向*/ ~~~ *在Web编程中，即：* ~~~ 设备像素比（dpr）= 屏幕物理像素（dp）/ CSS像素 /*在某一方向上，x方向或者y方向*/ ~~~ **该值和当前的缩放状态有关**。(通过控制整个值,可以控制页面的放大,快捷键`Ctrl +`的原理就是这个，下面会介绍) 所以通过 设备像素比，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。 例如iPhone4S，分辨率为：`640×960`，取屏幕宽度计算，物理像素640px，设备独立像素320px，那么，`devicePixelRatio` 值为 `640px / 320px = 2`，又如iPhone3，计算出来的 devicePixelRatio 值为 `320px / 320px = 1`，那么iphone 3就是非retina显示屏。 ### 获取dpr 在js中，我们可以通过`window.devicePixelRatio`获取当前设备的`dpr`。 在css中，可以通过`-webkit-device-pixel-ratio`，`-webkit-min-device-pixel-ratio`和`-webkit-max-device-pixel-ratio`进行媒体查询，对不同dpr的设备，做一些样式适配，这里我们只针对 webkit 内核的浏览器和 webview。 >查看更多设备像素比: http://screensiz.es/ http://devicepixelratio.com/ ### 缩放 (设备像素比的体现) 在桌面端，css的1个像素往往都是对应着电脑屏幕的1个物理像素。 一个CSS像素完全覆盖了一个设备像素：  而在手机端，由于屏幕尺寸的限制，缩放是经常性的操作。 设备物理像素(深蓝色背景)、CSS像素(半透明背景) 当用户进行缩小操作时，一个设备像素覆盖了多个CSS像素：  当用户进行放大操作时，一个CSS像素覆盖了多个物理像素：  不论我们进行缩小或放大操作，元素设置的CSS像素(如width:300px)是始终不变的，而一个CSS像素对应多少个设备像素是根据当前的缩放比例（devicePixelRatio）来决定的。 （<span style="color:red;font-weight:700">Xee：</span>用鼠标放大浏览器，测试window.devicePixelRatio,为什么有变化？有变化才正常啊！，记住取值时，我们四舍五入，可能就像上面说的一样） # 屏幕三要素 个人总结的：包括屏幕尺寸、屏幕分辨率和屏幕像素密度。 ## 屏幕尺寸(screen size) 　　我们常常听说5.5英寸大屏幕手机，实际上屏幕尺寸是指屏幕的对角线长度，一般讲的大小单位都是英寸。 比如iPhone5S的屏幕尺寸是4英寸。Samsung Note3是5.7英寸。 　　对于英寸没有什么概念，可以通过转换公式转换成常用的厘米 ~~~ 1英寸 = 2.54厘米 3.5in = 3.5*2.54cm = 8.89cm 4.0in = 4.0*2.54cm = 10.16cm 4.3in = 4.3*2.54cm = 10.922cm 4.8in = 4.8*2.54cm = 12.192cm ~~~  ## 屏幕分辨率 在讲解分辨率之前，我们要明白一个概念。在我们手机上呈现的一条线，一个面，一张图像都是由最小的单位像素来表示的，你也可以简单理解为是由一个个小方块组成的。看看下面这张图你就明白了。  屏幕分辨率是指屏幕的像素点数，一般以 `纵向像素×横向像素` 来表示分辨率。显示常用分辨率有如800×600、1024×768、1280×720、1600×900、1920×1080，单位是px。 　　通常，“分辨率”被表示成每一个方向上的像素数量，比如640×480等。某些情况下也可以同时表示成“每英寸像素”（ppi）以及图形的长度和宽度。比如72ppi，和8×6英寸。 　 若存在retina视网膜屏幕，要注意的是**屏幕分辨率指的是物理像素，而不是理想视口**。 　 分辨率越高代表系统的运行压力就越大，需要平衡一下。 ## 屏幕像素密度 PPI（Pixels Per Inch） 过去 iPhone 3GS 的时候，和平时电脑屏幕一样，在缩放比为100%的情况下，`1px` CSS像素对应着1px物理像素。 开发者在开发网页的时候只需要写上CSS像素 `width:320px,height:480px`。但是同样都是3.5英寸的屏幕尺寸的iPhone 3GS的屏幕和iPhone 4/4s，分辨率提升到了`640x960`，比3GS的分辨率大了一倍。**在相同的屏幕尺寸下塞入更多的像素点，这需要引入另一个重要的概念：屏幕像素密度** 计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的原子单位不是墨汁点而是像素，所以就创造了 PPI（Pixels Per Inch），这个值是**屏幕每英寸的像素数量，即像素密度（Screen density）**。 这个每英寸跟之前手机屏幕的尺寸一样，也是对角线的长度。所以，可以这么理解屏幕像素密度，即**在一个对角线长度为1英寸的正方形内所拥有的像素数**。 由于各种原因，目前**PPI**(主要是iOS)和**DPI**(比如在Android中)都会用在计算机显示设备的参数描述中，不过二者的意思是一样的，都是代表屏幕像素密度。 　　 Google Android官方指定按照下列标准区分不同设备的dpi  苹果的区分则更为简单：非高清屏、高清屏、超高清屏   从数值上看，苹果和安卓有这样的对应关系：  ### ppi 和 dpi 经常都会出现混用现象 从技术角度说，“像素”（P）只存在于计算机显示领域，而“点”（d）只出现于打印或印刷领域。 分辨率和图像的像素有直接关系。我们来算一算，一张分辨率为640 x 480的图片，那它的分辨率就达到了307200像素，也就是我们常说的30万像素，而一张分辨率为1600 x 1200的图片，它的像素就是200万。 **当DPI的概念用在计算机屏幕上时，就应称之为PPI（Pixels Per Inch）。** 同理： PPI就是计算机屏幕上每英寸可以显示的像素点的数量。你说 DPI大伙也能理解。 Windows系统默认PPI 为96， Mac OS系统默认PPI 为72。  PPI 计算公式：  （这里注意：显示屏不是模拟设备，是数字设备，因此不可能出现半个像素点的情况，肯定是px换算为dip产生的误差，**因此应该四舍五入取值**。<span style="color:red;font-weight:700">Xee：</span>:好像是这个道理。） 公式中的**屏幕尺寸**指显示屏对角线的尺寸，一般用英寸来表示。 可测量显示器对角线长度转换为英寸即可！`1英寸=2.54厘米`。  一个显示屏的**PPI**越高，说明在同一大小的屏幕上能显示更多物理像素，能给图像提供更多细节。 如小米3的高清显示屏，5英尺的屏幕下**分辨率（resolution）**高达1920*1080：  现在我们来根据公式计算一下，上图中的`$ PPI = 441 $`： `$ \frac{\sqrt{1920^2 + 1080^2}}{5} = 440.5814341809 \approx 441 $` --------- # 常见现象 ## retina下图片的展示情况 一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。 谈到这里，就得说一下，retina下图片的展示情况？ **理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示**。 在普通屏幕下是没有问题的，但是在retina屏幕下就会出现位图像素点不够，从而导致图片模糊的情况。 用一张图来表示：  如上图：对于`dpr=2`的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。 所以，对于图片高清问题，比较好的方案就是两倍图片(@2x)。 如：200×300(css pixel) img标签，就需要提供400×600的图片。 如此一来，位图像素点个数就是原来的4倍，在retina屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例，图片自然就清晰了(这也解释了之前留下的一个问题，为啥视觉稿的画布大小要×2？)。 ## 普通屏幕下，也用了两倍图片，会怎样呢？ 这里就还有另一个问题，如果普通屏幕下，也用了两倍图片，会怎样呢？ 很明显，在普通屏幕下，200×300(css pixel) img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数则是`200×300*4`，所以就出现一个物理像素点对应4个位图像素点，所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一，我们称这个过程叫做 **缩减像素采样** downsampling )，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差(但还是可以接受的)。 用一张图片来表示：  ## 为什么元素变得非常小  （缩小时，一个设备像素覆盖了多个CSS像素） 作为Web开发者我们整天在CSS里用`px`作为长度单位。这里的`px`指的是**CSS像素**，浏览器里的一切长度都是以CSS像素为单位的。**在非高清屏幕以及未缩放浏览器的情况下，一个CSS像素等于一个物理像素**；而在搭载了苹果公司的视网膜显示屏等高清屏幕（PPI特别高，一个屏幕上的物理像素点非常多）的设备上，如果一个CSS像素仍等于一个物理像素，那么网页上的各种元素就变得非常小，用户很难看清，因此高PPI的设备中，一个CSS像素通常等于两个甚至三个物理像素（浏览器自动设定，不同浏览器设定的会不一样）。 **简单整理下高清显示屏原理如下：** 1、一种具备超高像素密度的液晶屏 2、同样大小的屏幕上显示的像素点由1个变为多个 **所谓的一倍屏、二倍屏（Retina）、三倍屏，指的是设备以多少物理像素来显示一个 CSS 像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个 CSS 像素点，在普通屏幕下 1 个CSS像素对应 1 个物理像素，而在 Retina 屏幕下，1个CSS像素对应的却是4个物理像素。** ********** # 附录 ## Retina显示屏  看上图，是可以区分普通显示屏和高清显示屏（起源于retina），当devicePixelRatio值等于1时（也就是最小值），那么它是普通显示屏，iphone 3就是非retina显示屏，当devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清显示屏。 其中，**PPI在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度**（Apple给了它一个上流的名字——retina）。   *Non-Retina_Display（非retina显示屏）* **Retina显示屏**，它是一种由苹果公司设计和委托制造的显示屏，具备足够高像素密度而使得人体肉眼无法分辨其中单独像素点的液晶屏。 retina显示屏，就是高清显示屏的一种！现在的手机基本上都是高清显示屏了！ ## PPI和DPI **PPI和DPI都可以是指像素密度、屏幕(像素)密度。** **PPI**（Pixel Per Inch）是图像分辨率所使用的单位，意思是：在图像中每英寸所拥有的像素数目。从输出设备（如打印机）的角度来说，图像的分辨率越高，所打印出来的图像也就越细致与精密。  同样的分辨率，屏幕越大，像素点之间的距离越大，屏幕就越粗糙。所以大屏幕也不一定能带来良好的视觉感受。 实践证明，ppi低于240的让人的视觉可以察觉明显颗粒感。行动电话显示器的像素密度达到或高于300ppi就不会再出现颗粒感；手持平板类电器显示器的像素密度达到或高于260ppi就不会再出现颗粒感，而苹果电脑的Retina显示器像素密度只要超过200ppi就无法区分出单独的像素。比如iPhone4，3.5寸960×640，330ppi，屏幕的清晰程度其实是分辨率和尺寸大小共同决定，用ppi指数衡量屏幕清晰程度更加准确。 **DPI**（Dots Per Inch）最初用于衡量打印物上每英寸的点数密度，就是说你的打印机可以在一英寸内打多少个点，即打印机每英寸可以喷的墨汁点数。 DPI值越小图片越不精细。 ### ppi是每英寸像素，dpi是每英寸点。 科学的含义，ppi通常是衡量扫描仪、数码相机的参数，既每英寸的像素数。而dpi是衡量打印机的指标，既每英寸的点数。在实际应用中，经常有人会搞混这两个指标，其中甚至不乏专业的媒体。另外，这2个指标如果按不同的角度看，很多情况下可以是通用的。比如，同一个图片，如果我认为它是扫描或者拍摄的照片，那么分辨率是ppi，但如果我认为这个是将要打印的图片，那么分辨率可以是dpi。 因此，我们可以姑且将ppi等同于dpi（真实的区别是ppi是实际采样到的像素，这个真实很重要，它表示的就是数码相机、扫描仪真实采样出来的结果。而dpi是需要打印或者输出的分辨率，这个分辨率可能是在真实采样结果的基础上差值增加了像素的，也有可能是缩小了像素数的）。 ## dip/dp（设备独立像素） dip和dp是一个意思，都是Density Independent Pixels的缩写，即密度无关像素，上面我们说过，dpi是屏幕像素密度，假如一英寸里面有160个像素，这个屏幕的像素密度就是160dpi，那么在这种情况下，dp和px如何换算呢？**在Android中，规定以160dpi为基准，1dip=1px，如果密度是320dpi，则1dip=2px，以此类推。** 通过px来定义不同设备的元素大小是不靠谱的，于是安卓和苹果分别定义了dp和pt这两个概念。 dp到屏幕（物理）像素的**转换公式**:Physical Pixels = dip * (ppi / 160)。 iphone 6，PPI就是326，所以取值，四舍五入为2。 举例来说, 在 240 dpi 的屏幕上, 1dp 等于 1.5**物理(屏幕)像素**。 1. dip或dp,（device-independent pixels，device pixels，设备无关像素）,android开发单位，虚拟像素单位, 用于定义应用的UI, 以密度无关的方式表达布局尺寸或位置。 2. 1dip等价于160dpi屏幕下的一个物理像素点，dp是绝对单位，当指定一个元素为30dp后，不管在多大的屏幕中，元素的大小都是固定的30dip，也可以说：3/16（十六分之三）英寸。 3. 在运行时, android根据使用中的屏幕的实际密度, 透明地处理任何所需dp单位的缩放。 应用场景是开发人员计算渲染像素的： 若套用此套转换公式，开发人员写一个高度为48dip的控件： 在小米2S上的渲染像素为：48* 320/160 = 96px 在Sony Z2上的渲染像素为：48* 480/160 = 144px 在华为 Mate 7上的渲染像素为：48* 480/160 = 144px >参考：[Android设备上的dp](https://www.zhihu.com/question/20697111) ### 相关关系 dp和css px是几乎完全对应的。传统上我们把css px叫做相对单位，这确实有点令人困惑，所以现在css规范也改了说法。在现代css中px被定义为96px = 1in，也就和in/pt/mm一样成了绝对单位，但是css规范要求对于非典型视距设备要根据参考像素进行锚定，而手机相对电脑屏幕来说就是非典型视距，因此所有现代手机浏览器里都设为160px = 1in，或者对于Android来说就是1px = 1dp。不过dp和css px只是通过转换来达到160dp = 1in，而真实设备被归类为ldpi/mdpi/hdpi/xhdpi...只是依据最接近的dpi密度，不太可能是正好120/160/240/320，因此真实设备上160dp与物理长度1in肯定是有偏差的。 （同理，现在的css规范中的1in因为已经跟px绑定，所以在几乎所有设备上也无法确保真的是物理长度1in，而只是接近而已。并且会随着缩放而缩放。） ## 其它概念： 描述分辨率的单位有：dpi（点每英寸）、lpi（线每英寸）和ppi（像素 每英寸）。从技术角度说，“像素”只存在于电脑、手机显示领域，而“点”只出现于打印或印刷领域。对于web开发者，我们需要清楚ppi（ pixel per inch） sp：与缩放无关的抽象像素（Scale-independent Pixel）。sp和dp很类似但唯一的区别是，Android系统允许用户自定义文字尺寸大小（小、正常、大、超大等等），当文字尺寸是“正常”时1sp=1dp=0.00625英寸，而当文字尺寸是“大”或“超大”时，1sp>1dp=0.00625英寸。类似我们在windows里调整字体尺寸以后的效果——窗口大小不变，只有文字大小改变。 pt：point，来源于印刷业，IOS开发单位，绝对长度，是一个标准的长度单位，`1pt＝1/72`英寸，px=`pt*ppi/72`，道理和dp一样。 ## HD和4K 　　现在移动设备、智能电视宣传最多的两个关键词估计就是HD、4K，这二者都是用来描述显示设备分辨率的标准，到底二者之间有什么区别？ 　　HD:没有固定的标准，基本上只要宽度为720px的都算是HD 　　full HD(全高清): 1920×1080分辨率 　　4K: 4k也叫QHD或UHD(超高清)，最小分辨率是3840×2160，主要是现在高端电视的分辨率；其还有一个更高的4096×2160的标准，主要用于电影放映机或者专业相机。  ## 关于相机像素 　　我们常常听过相机支持1000万像素。相机所说的像素，其实是最大像素的意思，像素是分辨率的单位，这个像素值仅仅是相机所支持的有效最大分辨率。 ~~~ 640*480 = 307200 = 30万像素 1600*1200 = 1920000 = 200万像素 3264*2488 = 8120832 = 800万像素 4536*3024 = 13716864 = 1400万像素 ~~~ ## 放弃的target-densitydpi 是这样的，在安卓中WebKit内核默认按照160的DPI/ppi来排版。假如设备真实DPI是480，宽度是1080，在WebKit会按160DPI，360宽度来排版。排版结束后在放大到1080宽。 target-densitydpi=device-dpi可以强制内核以480DPI排版，使画面更精细，window.innerwidth也将为屏幕宽度1080. **但WebKit从去年开始取消了对target-densitydpi的支持。** 想实现target-densitydpi=device-dpi的效果有什么方法？提交此次补丁的WebKit开发者说可以用responsive images 和 CSS device units来替代。 > [target-densitydpi](http://www.cnblogs.com/Limo-Pond/p/5291402.html) # 参考 > [PM关于设计那些事儿（一）](http://mp.weixin.qq.com/s?__biz=MzI5NDQxMjE5Mg==&mid=2247483670&idx=1&sn=b7da0134d88c06c6526b6cd4b9b89543&scene=4#wechat_redirect) [dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算](http://www.cnblogs.com/yaozhongxiao/archive/2014/07/14/3842908.html)