由于用户浏览器分辨率分布、运营维护成本、全站页面宽度规范等原因，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规范草案：
二、@viewport css
如：
@viewport { width： device-width; zoom： 2.0; }
w3c草案中@viewport 支持以下属性
viewport meta方式和@viewport是可以相互转化的，估计以后@viewport是要替代viewport meta的。如：
<meta name=“viewport” content=“width=480， initial-scale=2.0， user-scalable=1”>
可以转化成以下css @viewport { width： 480px; zoom： 2.0; user-zoom： zoom; }
而且@viewport可以和media query联用，天造地设的一双呀，这样可以针对不同的终端尺寸设置不同的viewport。
@viewport {
width： device-width;
} @media screen and （min-width： 400px） {
div { color： red; } }
@media screen and （max-width： 400px） {
div { color： green; }
}
不过，@viewport目前safari并不支持，Opera Mobile 11、ie10支持@viewport,但需要加私有前缀（-o-viewport、-ms-viewport），其他浏览器均不支持
ipad横版990px
ipad竖版750px
（举报）