1、响应式新首页 Device Adaptation 小结由于用户浏览器分辨率分布、运营维护成本、全站页面宽度规范等原因,2012 年末一淘新首页对 1200px、990px 、750px(for ipad)这 3 个尺寸的响应不同布局,期望在ipad 下横屏显示 990px 版本,竖版显示 750 版本,iphone 下显示 750 版本。不同设备尺寸的不同显示自然少不了 viewport 设置,目前 W3C 针对 viewport 的规范还处于草案阶段,有 2 种方式可以设置页面的 viewport,viewport meta 标签和viewport css 方式。一、viewport met
2、a element该 viewport meta 支持以下 6 个属性,ios 对 viewport meta 的实现对比 W3C 规范草案:本文由 过期域名抢注 域名抢注 域名预订 整理二、viewport css如:viewport width: device-width; zoom: 2.0; w3c 草案中 viewport 支持以下属性viewport meta 方式和viewport 是可以相互转化的,估计以后viewport 是要替代viewport meta 的。如:可以转化成以下 css viewport width: 480px; zoom: 2.0; user-zoom
3、: 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),其他浏览器均不支持