我怎么知道手机屏幕的CSS像素宽度？

随着移动设备视图的快速增长，自适应Web设计变得越来越重要. Web程序员在开发移动页面时经常会遇到此类问题. 移动设备制造商声明的屏幕像素宽度大小与网页开发中使用的CSS像素宽度不一致. 为什么会这样？

设备像素设计是一个物理概念，指的是设备中使用的物理像素.

例如，iPhone 5的分辨率为640 x 1136px.

CSS像素是Web编程的概念，是指CSS样式代码中使用的逻辑像素.

在CSS规范中，长度单位可以分为两类，绝对单位和相对单位. px是相对单位，设备像素是绝对单位.

例如，iPhone 5使用Retina视网膜屏幕，并且2px x 2px的设备像素表示1px x 1px的css像素，因此设备像素的数量为640 x 1136px，而CSS逻辑像素的数量为320 x 568像素.

这需要谈论每英寸像素和设备像素比率.

ppi表示每英寸的像素数（像素），值越高，显示屏可以显示图像的密度越高. ppi的计算方法可参考Wikipedia每英寸像素数

上面的ppi计算是为了获得密度边界并获得默认的缩放比例，即设备像素比例.

从上图可以看出，ppi在120-160之间的手机被归类为低密度手机手机屏幕比例怎么算，在160-240之间的ppi被归类为中等密度手机屏幕比例怎么算，在240-320处被归类为高密度，并且高于320的像素被归类为超高密度（Apple给它起了很高的名字-Retina）.

获取设备像素比率后，您可以知道设备像素与CSS像素之间的比率. 当此比例为1: 1时，将使用1个设备像素显示1个CSS像素. 当此比例为2: 1时，将使用4个设备像素显示1个CSS像素，而当此比例为3: 1时，将使用9（3 * 3）个设备像素来显示1个CSS像素.

一般美术师以设备像素为单位制作设计草图. 前端工业程序员参考相关的设备像素比率进行转换和编码.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shouji/article-239499-1.html