视口（viewport）

讲述meta视口标签和媒体查询相关的内容。

示例代码：

<meta name="viewport" content="width=device-width, initial-scale=1">
@media screen and (max-width:480px) {
    // some style
}

像素（pixel）

• 设备像素：设备屏幕的物理像素。
• CSS像素：为Web开发者创造的，在CSS和JS中使用的一个抽象层。

CSS像素和设备像素的比例取决于屏幕是否高DPI和用户缩放的比例。

三个视口

桌面上视口宽度等于浏览器宽度，但在手机上有所不同。

• 布局视口。手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。
• 视觉视口。用户正在看到的网站的区域，与设备屏幕一样宽。
• 理想视口。当网站是为手机准备的时候使用。使用meta声明。早期iPhone理想视口为320*480px。

缩放

桌面浏览器的缩放仅改变内容尺寸，不改变布局视口；移动端缩放则整体改变。

不要禁止缩放。

<meta name="viewport" content="user-scalable=no">

禁止缩放是邪恶的，并且浏览器可以关闭禁止缩放功能。

分辨率

物理分辨率：设备每英寸内点数（DPI）。

设备像素比：设备像素个数和理想视口的比（DPR）。

dppx和dpi：每一个像素的点数。JS中的window.devicePixelRatio和媒体查询的device-pixel-ratio的单位。IE不支持，因此要使用dpi单位：

if(window.devicePixelRatio) {
    // DPR大于等于2时执行
}

@media all and((-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi)) {
    // DPR大于等于2时生效
}

1dppx = 96dpi：一英寸对应CSS中96个像素。

meta视口

<meta name="viewport" content="name=value,name=value">

其中可用的name为：

• width：device-width适用于大多数情况。
• initial-scale：一般设为1，为了兼容应同时设置width=device-width。
• minimum-scale
• maximum-scale
• user-scalable

媒体查询

媒体类型：目前只有print被正确实现。一般使用all。

Web开发者希望区分能力弱和能力强的浏览器，而弱浏览器为了避免探测开始伪装自己。

过去的浏览器最多可处理WAP和HTML的子集XHTML-MP，它们大都遵循标准并实现handheld，Web开发者为这些类型提供简单的样式。而新的现代移动浏览器出现后，它们支持全部样式、JS，因此宁愿不实现handheld而获得和桌面浏览器一样的待遇。

JavaScript

媒体查询与JavaScript属性相对应。

• 物理屏幕分辨率：screen.width/height（有兼容问题不建议使用）
• 布局视口：document.documentElement.clientWidth
• 视觉视口：window.innerWidth
• 理想视口：screen.width/height（有兼容问题不建议使用）
• 设备像素比：window.devicePixelRatio
• 屏幕方向：window.orientation