http://m.taobao.com 淘宝移动端这里为什么只对苹果的产品做了特殊处理?还有针对不同的window.devicePixelRatio,加载了不同的CSS(比如devicePixelRatio=2时,字体大小为30px;devicePixelRatio=1时,字体大小为15px),是怎么实现的?
var c = window.devicePixelRatio; if (!navigator.userAgent.match(/iPad|iPhone|iPod/i)) { c = 1 } var b = 1 / c; document.write('');
可以看看这篇文章,对淘宝这个兼容有比较详细的讲解!
使用Flexible实现手淘H5页面的终端适配
使用的应该是淘宝自行开发的lib.flexible
项目中引入这个文件https://github.com/amfe/lib-flexible/blob/master/src%2Fflexible.js,
通过less
定义@rem
,比如@rem:32rem
,以后用到的除了字体以外的尺寸单位都将其除以@rem就行了。当然,这是针对640px而言的。