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