移动WEB中的像素与Viewport
浏览数：20 /
时间：2015年06月11日
设备像素（Device Pixel）：
显示屏的最小物理显示单位。手机设备的屏幕参数（例如1920x1080）就是指的设备像素。
设备密度（PPI/DPI）：
显示屏每英寸的长度里，所包含的设备像素的数量。
ios里把PPI大于320的显示屏称之为Retina。android通过ldpi(120~160)、mdpi(160~240)、hdpi(240~320)、xhdpi(>320)来给显示屏分等级。
设备无关像素（Device Independent Pixel）：
用于设置界面显示的虚拟像素单位，设备无关像素可以比设备像素大或小。
页面的CSS像素，以及PC显示器设置的分辨率像素，就是指的这个像素。
通过页面的缩放，或设置显示器的分辨率，可以调整单个设备无关像素的大小。
设备像素比（DevicePixelRatio）：
显示屏容纳的设备像素和设备无关像素数量的比值。在浏览器里，这个值与页面的缩放有关。
部分浏览器的支持通过window.devicePixelRatio的方式获取值。
Viewport：
页面html元素的父容器，html设置宽度为100%时，与viewport的宽度相等。在PC浏览器上，viewport的宽度与浏览器可视区域的宽度一致，在手机浏览器上则不一定，大多数手机浏览器默认的viewport宽度是980px。
在页面中，可以通过<meta name="viewport" content="width=device-width"/>的方式来设置viewport的宽度，width的值可以是device-width，或一个整数。
viewport的宽度单位是px，并且这里的px指的是设备无关像素（CSS像素）。因为不同机型和浏览器的默认缩放不一样，通过这些浏览器打开同一个未设置viewport的页面时，页面视觉上的宽度是不一样的。ios的默认缩放策略是，页面不出现滚动条，占满浏览器的可视区域，此时的设备像素比 = 显示屏的设备像素宽度（单位是设备像素px） / 默认viewport宽度（980px，单位是设备无关像素px）。android的默认缩放策略，则各不一样，有的跟ios一样，有的是根据target-densitydpi的默认值medium-dpi来计算。
上面提到的width=device-width，那这个device-width的取值是多少呢？在不同的设备上，单个设备像素的大小不一样，这样的话，同一个页面在这些设备上的效果就会完全不一样。要想解决这个问题，就需要在不同的设备上显示网页时，所使用的CSS像素中，单个CSS像素的宽度是一样的 。早期的设备，例如第一个版本的iphone，3.5英寸大小，设备像素是320，并且设备像素与CSS像素相等。后来新设备的设备像素值越来越大，而屏幕大小没有增加太多，这样单个设备像素的宽度就更小了，单个CSS像素需要包含多个设备像素，才能保障单个CSS像素的大小和老版本的设备基本相等，这样每个设备就产生了自己的理想设备像素比。通过这个设备的设备像素宽度 / 这个理想的设备像素比，就得到了device-width的取值，在ios上是320，在android上，有320、360、384、400等不同的取值。
在media query中device-width指的是设备像素，与这里的取值不一样。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
