移动设备样式之媒体查询HTML5
有一种目标如java一样，一次编写到处运行，在移动设备流行的当下，有木有可能只实现一套页面，就能够在所有平台的浏览器下访问网站，显示适合的效果呢？答案是肯定的
HTML5带来了希望，使用Viewport及Media Queries样式模块
1.什么是viewport
Apple为了解决移动版Safari的屏幕分辨率大小问题，专门定义了viewport虚拟窗口。它主要作用是允许开发者创建一个虚拟的窗口，并自定义其窗口的大小或缩放功能。
如果开发者没有定义这个虚拟窗口，移动版safari的虚拟窗口默认大小为980像素。目前除了safari浏览器外，其他浏览器也支持viewport虚拟窗口，但不同浏览器对viewport窗口的默认大小支持都不一致，默认值分别如下：
Android Browser浏览器的默认值是800像素
safari浏览器默认值是980像素
IE浏览器默认值是974像素
opera浏览器默认值是850像素
2.如何使用viewport？
viewport虚拟窗口是在meta元素中定义的，其主要作用是设置web页面适应移动设备的屏幕大小。
<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=0″/>
代码作用是自定义虚拟窗口，并指定虚拟窗口width宽度为device-width,初始缩放比例大小为1倍，同时不允许使用手动缩放功能
自iphone面世以来，其屏幕的分辨率一致维持在320*480,由于Apple在加入viewport时，基本上使用width=device-width的表达方式来表示iphone屏幕的实际分辨率大小的宽度，其他浏览器厂商在实现其viewport的时候也兼容了device-width这样的特性
content属性允许设置6种不同的参数，分别如下：
width指定虚拟窗口的屏幕宽度大小
height指定虚拟窗口的屏幕高度大小
initial-scale指定初始缩放比例
maximum-scale指定允许用户缩放的最大比例
minimum-scale指定允许用户缩放的最小比例
user-scalable指定是否允许手动缩放