移动设备web开发笔记—viewport与media query的应用

随着移动设备的遍及，移动平台越来越受到各互联网公司的重视，无论APP也好，还是web也好。最近接到了一个公司制作移动设备注册页面的需要。虽然之前也做过些移动设备的东西，不过还有些东西是知其然却不知其所有然。今天趁这个机会做个笔记。记录下之前遗留下来的问题。下面进入正题。

移动设备的屏幕要比PC屏幕小很多，如果按照PC的思路来做移动端，通常都会不尽如人意。于是不同的移动设备都给viewport设置了默认的宽度，大致为：safari为980px，opera为850px，android4.X为980px，android2.X为800px，ie为974px。这样，宽度就接近PC端的浏览器了。

但是，想象下，如果你的手机打开一个页面，所有内容在一屏内显示，内容会多么的小。所以通常情况下，我们都会针对移动端做不同的界面设计，减少显示内容、扩大模块，以提升体验（或采用响应式布局，如本站。）。这样一来，我们就需要用viewport meta来改变浏览器的clientWidth值。

viewport meta

viewport是用来控制页面缩放与viewport宽度的，主要属性有下面6个：

• width:可视区域的宽度，范围从200到10000。一般为了兼容各种分辨率的设备会设置为devic-width。设为固定值时，viewport等于该值

• height:可视区域的度度，范围从200到10000。这个我一般不设。

• initial-scale：初始化缩放比例，初始加载的时候就以这个比例进行缩放。

• maximum-scale：允许缩放的最大比例。

• minimum-scale：允许缩放的最小比例。

• user-scalable：是否可以手动缩放。

• target-densitydpi：该属性属于android自带浏览器。该值有：device-dpi, high-dpi, medium-dpi, low-dpi，也可以设置一个具体的数字。关系到最终的viewport值。默认为medium-dpi。

对于target-densitydpi，本人测试时，似乎是无效的。于是查了些资料。网上讨论的比较多，但最终我也没确定该属性的真实用法。只知道其作用是改变viewport值。也有文章说在12年，webkit已经取消了该属性。其真实情况还有待测试。

值得注意的是当设置width为devic-width时，width获得的并不是设备屏幕的分辨率值,而是分辨率宽÷devicePixelRatio÷initial-scale得出的。经测试，devicePixelRatio值如下：

分辨率(宽)	devicePixelRatio
<320px	0.75
=320	1
>320&<=640	1.5
>640	2

网上也有资料说根dpi有关，但在测试过程中显示并无绝对的关系。另外测试过程中也有意外，比如魅族3的分辨率宽为1080，initial-scale为1时得出的值为432，也就是说devicePixelRatio的值为2.5

media query

media query是css3新增的。用法有2种：

• 在link标签内设置media属性，如<link rel="stylesheet" type="text/css" href="/Admin/News/edit/id/base.css" media="screen and (min-width:320px)">

• 直接写在样式表内，如：@media  screen and(min-width:320px){该特性下执行的样式代码}

如上面的用法中，其属性包含：

• screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型

• and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

• (min-width:320px) 就是媒体特性，其被放置在一对圆括号中。具体特性查看相关的Media features

viewport与media query结合下，我们就可以制作出符合各移动设备的web页面了。当然布局简单的页面，width用百分比来做也可以实现各移动设备的完美承现。另外，考虑到流量与网速，对于load的内容，最好能根据分辨率加载不同大小的文件，所以，最好还是用media query属性。

首发地址：http://www.itooy.com/p_419.html