响应式新首页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

<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

1 2 3 下一页标签：西部数码 响应式页面设计 网页设计 网站优化 响应式页面