移動端適配方案總結(二)

拉鉤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佈局教程：語法篇