标签:
设备像素(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指的是设备像素,与这里的取值不一样。
移动WEB中的像素与Viewport
标签:
原文地址:http://www.cnblogs.com/lusen/p/4326807.html