移动设备样式之媒体查询HTML5<一>

移动设备样式之媒体查询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指定是否允许手动缩放