做响应式网站的知识点

浏览数：27 / 时间：2015年06月09日

1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />用与在360浏览器中出发Chrome内核的方法。

　　<meta http-equiv="X-UA-Compatible" content="IE=edge"/>取IE浏览器的最高版本的浏览器模式。也可将等号后的内容换成具体的IE几。

2. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

　　网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。

width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

响应式新首页Device Adaptation小结

由于用户浏览器分辨率分布、运营维护成本、全站页面宽度规范等原因，2012年末一淘新首页对1200px、990px、750px（for ipad）这3个尺寸的响应不同布局，期望在ipad下横屏显示990px版本,竖版显示750版本，iphone下显示750版本。不同设备尺寸的不同显示自然少不了viewport设置，目前W3C针对viewport的规范还处于草案阶段，有2种方式可以设置页面的viewport,viewport meta标签和@viewport css方式。

窗体顶端

一、viewport meta element

窗体底端

该viewport meta支持以下6个属性，ios对viewport meta的实现对比W3C规范草案：

属性	safari的实现	W3C规范草案
width	可视区域的宽度，默认是980px,取值区间[200,10000];ios 1.0及以上支持	可视区域的宽度，取值区间[1,10000]
height	可视区域的高度，默认为根据设备的宽高比再根据宽度计算出，取值范围为[223,10000];ios 1.0及以上支持	可视区域的高度，取值区间为[1~10,000]
initial-scale	初始化缩放比例，默认根据可显示区域适应页面大小计算出的，取值区间为[minimum-scale，maximum-scale];ios 1.0及以上支持	初始化缩放比例，取值区间[0.1, 10]
minimum-scale	最小缩放比例,默认0.25，取值区间为[>0,10];ios 1.0及以上支持	最小缩放比例,取值区间为[0.1, 10]
maximum-scale	最大缩放比例,默认5.0，取值区间为[>0,10]；ios 1.0及以上支持	最大缩放比例,取值区间为[>0,10]
user-scalable	是否允许用户手动缩放,默认yes,不允许为no；ios 1.0及以上支持	是否允许用户手动缩放,yes or no