做响应式网站的知识点
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 - 用户是否可以手动缩放
由于用户浏览器分辨率分布、运营维护成本、全站页面宽度规范等原因，2012年末一淘新首页对1200px、990px、750px（for ipad）这3个尺寸的响应不同布局，期望在ipad下横屏显示990px版本,竖版显示750版本，iphone下显示750版本。不同设备尺寸的不同显示自然少不了viewport设置，目前W3C针对viewport的规范还处于草案阶段，有2种方式可以设置页面的viewport,viewport meta标签和@viewport css方式。
窗体顶端
一、viewport meta element
窗体底端
<meta name="viewport" content="width=device-width,initial-scale=1.0">
该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 |
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
