移动端布局三种视口_视口（viewport）

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

示例代码：

~~~

@media screen and (max-width:480px) {

// some style

}

~~~

## 像素(pixel)

* 设备像素：设备屏幕的物理像素。

* CSS像素：为Web开发者创造的，在CSS和JS中使用的一个抽象层。

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

## 三个视口

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

* 布局视口。手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。

* 视觉视口。用户正在看到的网站的区域，与设备屏幕一样宽。

* 理想视口。当网站是为手机准备的时候使用。使用meta声明。早期iPhone理想视口为320*480px。

## 缩放

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

> 不要禁止缩放。

~~~

~~~

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

## 分辨率

物理分辨率：设备每英寸内点数(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视口

~~~

~~~

其中可用的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