《新首页device adaptation小结》由会员分享，可在线阅读，更多相关《新首页device adaptation小结（3页珍藏版）》请在金锄头文库上搜索。
1、响应式新首页响应式新首页 Device Adaptation 小结小结由于用户浏览器分辨率分布、运营维护成本、全站页面宽度规范等原因，2012 年末一淘新首页对 1200px、990px、750px（for ipad）这 3 个尺寸的响应不同布局，期望在ipad 下横屏显示 990px 版本，竖版显示 750 版本，iphone 下显示 750 版本。不同设备尺寸的不同显示自然少不了 viewport 设置，目前 W3C 针对 viewport 的规范还处于草案阶段，有 2 种方式可以设置页面的 viewport，viewport meta 标签和viewport css 方式。一、一、vie
2、wport meta 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;
3、 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），其他浏览器均不支持
