移动端适配方案总结(二)

拉钩webapp

　　1. 设置<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

　　2. 设置 html { font-size: 65.5% ；}（10.48px =  16px*65.5% = 1rem )

　　3 .顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变, 每个列表的高度也不变

　　4. 设置文本字体  例如 16px时  { font-size: 1.6rem；}

 

淘宝webapp

 

(1）动态设置viewport的scale

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

 

（2）动态计算html的font-size

 

　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

 

（3）各元素的css尺寸 = 设计稿标注尺寸/(设计稿横向分辨率/10)

 

（4）font-size需要额外的媒介查询，并且font-size不使用rem

 

  (5) https://github.com/amfe/lib-flexible 

网易

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

（1）先拿设计稿竖着的横向分辨率除以100得到body元素的宽度：

　　如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem

　　如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

（2）在dom ready以后，通过以下代码设置html的font-size:

　　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

　(3) font-size需要额外的媒介查询

　(4) 当deviceWidth大于设计稿的横向分辨率时，html的font-size始终等于横向分辨率/body元素宽

　　　　var deviceWidth = document.documentElement.clientWidth;

　　　　if(deviceWidth > 640) deviceWidth = 640;

　　document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

 flex布局

　　Flex布局教程：语法篇