1.layout viewport(布局视口)
一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口)
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
width=device-width 也就是将layout viewport(布局视口)的宽度设置 ideal viewport(理想视口)的宽度。
2.visual viewport(视觉视口)和物理像素
物理屏幕的可视区域,屏幕显示器的物理像素,同样尺寸的屏幕,像素密度大的设备,硬件像素会更多。
iPhone5 :640 * 1136
iPhone6:750 * 1334
iPhone6 Plus:1242 * 2208
3.ideal viewport(理想视口)通常是我们说的屏幕分辨率。不可改变
而移动端手机屏幕通常不可以设置分辨率,一般都是设备厂家默认设置的固定值,换句话说 dip 的值就是 ideal viewport(理想视口)(也就是分辨率)的值,比如,iPhone的屏幕分辨率:
iPhone5 :分辨率 320 * 568,物理像素 640 * 1136,@2x
iPhone6:分辨率 375 * 667,物理像素 750 * 1334,@2x
iPhone6 Plus :分辨率 414 * 736,物理像素1242 * 2208,@3x
1.dip (设备逻辑像素)
跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。
2.CSS像素
CSS像素(px)用于页面布局的单位。样式的像素尺寸(例如 width: 100px)是以CSS像素为单位指定的。CSS像素与 dip 的比例即为网页的缩放比例,如果网页没有缩放,那么一个CSS像素就对应一个 dip(设备逻辑像素) 。