关于移动端 viewport 的一些浅谈

指定固定宽度渲染视口

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"/>

这样设置，会使视口以750px的大小渲染，这样可以使我们的布局就可以按照设计图的尺寸去直接设置元素的宽高。

缺点：无法使用@media去设置不同屏幕大小的样式

优点：布局相对简单，工作量小

以设备宽度渲染视口

<meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi"/>

这样设置的目的是使设备按照自己的设备尺寸去渲染。

缺点：工作量大，需要配合rem，em布局

优点：可以使用@media去设置不同屏幕大小的样式

target-densitydpi 属性的取值范围:

device-dpi   – 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi     – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi   – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
low-dpi      – 使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
<value>      – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。