首页 > 代码库 > 淘宝移动端兼容

淘宝移动端兼容

js控制分辨率等比例缩放

var scale = 1 / devicePixelRatio;document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘,‘initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);

淘宝布局的第二个要点,就是html元素的font-size的计算公式,font-size = deviceWidth / 10:

接下来要解决的问题是,元素的尺寸该如何计算,比如说设计稿上某一个元素的宽为150px,换算成rem应该怎么算呢?这个值等于设计稿标注尺寸/该设计 稿对应的html的font-size。拿淘宝来说的,他们用的设计稿是750的,所以html的font-size就是75,如果某个元素时150px 的宽,换算成rem就是150 / 75 = 2rem。总结下淘宝的这些做法:

技术分享

淘宝移动端兼容