浏览器自适应 meta 之 viewport

1.允许网页宽度自动调整 
首先,在网页代码的头部,加入
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 
viewport 是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 

 

 
所有主流浏览器都支持这个设置,包括IE9。但对于那些让设计师蛋疼的老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。 
格式:
<!--[if lt IE 9]> 
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
<![endif]-->
 

1、width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位为缩放为100%的CSS的像素)

 

2、height : 和width相对应,指定高度

 

3、initial-scale : 初始缩放比例,页面第一次加载时的缩放比例

 

4、maximum-scale : 允许用户缩放到的最大比例,范围从0到10.0

 

5、minimum-scale : 允许用户缩放到的最小比例,范围从0到10.0

 

6、user-scalable : 用户是否可以手动缩放,值可以是:①yes、 true允许用户缩放;②no、false不允许用户缩放

更多文章在这个类别: 如何设计好网站页面? »