這是關(guān)于淘寶移動端H5頁面和網(wǎng)易移動端H5頁面的適配方案的學(xué)習(xí)。也幫助各位想要學(xué)習(xí)web APP前端開發(fā)發(fā)APP設(shè)計師普及一些知識點，也讓大家快速掌握web APP的頁面適配方案。

1、跟隨25學(xué)堂小編來看看網(wǎng)易在不同分辨率下，呈現(xiàn)的效果：

從上面幾張圖可以看出，隨著分辨率的增大，頁面的效果會發(fā)生明顯變化，主要體現(xiàn)在各個元素的寬高與間距。375*680的比320*680的導(dǎo)航欄明顯要高。能夠達(dá)到這種效果的根本原因就是因為網(wǎng)易頁面里除了font-size之外的其它css尺寸都使用了rem作為單位，比如你看導(dǎo)航欄的高度設(shè)置代碼：

使用rem布局結(jié)合在html上根據(jù)不同分辨率設(shè)置不同font-size有很多不好解決的麻煩，網(wǎng)易是如何解決的呢？

最根本的原因在于，網(wǎng)易頁面上html的font-size不是預(yù)先通過媒介查詢在css里定義好的，而是通過js計算出來的，所以當(dāng)分辨率發(fā)生變化時，html的font-size就會變，不過這得在你調(diào)整分辨率后，刷新頁面才能看得到效果。你看代碼就知道為啥font-size是直接寫到html的style上面的了（js設(shè)置的原因）：

它是根據(jù)什么計算的，這就跟設(shè)計稿有關(guān)了，拿網(wǎng)易來說，它的設(shè)計稿應(yīng)該是基于iphone4或者iphone5來的，所以它的設(shè)計稿豎直放時的橫向分辨率為640px，為了計算方便，取一個100px的font-size為參照，那么body元素的寬度就可以設(shè)置為width: 6.4rem，于是html的font-size=deviceWidth / 6.4。這個deviceWidth就是viewport設(shè)置中的那個deviceWidth。根據(jù)這個計算規(guī)則，可得出本部分開始的四張截圖中html的font-size大小如下：

deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

事實上網(wǎng)易就是這么干的，你看它的代碼就知道，body元素的寬是：

根據(jù)這個可以肯定它的設(shè)計稿豎著時的橫向分辨率為640。然后你再看看網(wǎng)易在分辨率為320*680，375*680，414*680，500*680時，html的font-size是不是與上面計算的一致：

320*680

375*680

414*680

500*680

這個deviceWidth通過document.documentElement.clientWidth就能取到了，所以當(dāng)頁面的dom ready后，做的第一件事情就是：

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

這個6.4怎么來的，當(dāng)然是根據(jù)設(shè)計稿的橫向分辨率/100得來的。

下面總結(jié)下網(wǎng)易的這種做法：

（1）先拿設(shè)計稿豎著的橫向分辨率除以100得到body元素的寬度：

如果設(shè)計稿基于iphone6，橫向分辨率為750，body的width為750 / 100 = 7.5rem

如果設(shè)計稿基于iphone4/5，橫向分辨率為640，body的width為640 / 100 = 6.4rem

（2）布局時，設(shè)計圖標(biāo)注的尺寸除以100得到css中的尺寸，比如下圖：

播放器高度為210px，寫樣式的時候css應(yīng)該這么寫：height: 2.1rem。之所以取一個100作為參照，就是為了這里計算rem的方便！

（3）在dom ready以后，通過以下代碼設(shè)置html的font-size:

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

6.4只是舉個例子，如果是750的設(shè)計稿，應(yīng)該除以7.5。

（4）font-size可能需要額外的媒介查詢，并且font-size不能使用rem，如網(wǎng)易的設(shè)置

• @media screen and (max-width:321px){
      .m-navlist{font-size:15px}
  }
  @media screen and (min-width:321px) and (max-width:400px){
      .m-navlist{font-size:16px}
  }
  @media screen and (min-width:400px){
      .m-navlist{font-size:18px}
  }

   

最后還有2個情況要說明：

第一，如果采用網(wǎng)易這種做法，視口要如下設(shè)置：

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

第二，當(dāng)deviceWidth大于設(shè)計稿的橫向分辨率時，html的font-size始終等于橫向分辨率/body元素寬：

640*680

641*680

之所以這么干，是因為當(dāng)deviceWidth大于640時，則物理分辨率大于1280（這就看設(shè)備的devicePixelRatio這個值了），應(yīng)該去訪問pc網(wǎng)站了。事實就是這樣，你從手機訪問網(wǎng)易，看到的是觸屏版的頁面，如果從pad訪問，看到的就是電腦版的頁面。

如果你也想這么干，只要把總結(jié)中第三步的代碼稍微改一下就行了：

var deviceWidth = document.documentElement.clientWidth;if(deviceWidth > 640)

deviceWidth = 640;

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

2. 淘寶移動端H5的做法

看看淘寶在不同分辨率下，呈現(xiàn)的效果：

淘寶的效果跟網(wǎng)易的效果其實是類似的，隨著分辨率的變化，頁面元素的尺寸和間距都相應(yīng)變化，這是因為淘寶的尺寸也是使用了rem的原因。在介紹它的做法之前，先來了解一點關(guān)于viewport的知識，通常我們采用如下代碼設(shè)置viewport:

<meta name="viewport"   content="width=device-width, initial-scale=1,
 maximum-scale=1, user-scalable=no">

這樣整個網(wǎng)頁在設(shè)備內(nèi)顯示時的頁面寬度就會等于設(shè)備邏輯像素大小，也就是device-width。這個device-width的計算公式為：

設(shè)備的物理分辨率/(devicePixelRatio * scale)，在scale為1的情況下，device-width = 設(shè)備的物理分辨率/devicePixelRatio 。

devicePixelRatio稱為設(shè)備像素比，每款設(shè)備的devicePixelRatio都是已知，并且不變的，目前高清屏，普遍都是2，不過還有更高的，比如2.5, 3 等，我魅族note的手機的devicePixelRatio就是3。淘寶觸屏版布局的前提就是viewport的scale根據(jù)devicePixelRatio動態(tài)設(shè)置：

在devicePixelRatio為2的時候，scale為0.5

在devicePixelRatio為3的時候，scale為0.3333

這么做目的當(dāng)然是為了保證頁面的大小與設(shè)計稿保持一致了，比如設(shè)計稿如果是750的橫向分辨率，那么實際頁面的device-width，以iphone6來說，也等于750，這樣的話設(shè)計稿上標(biāo)注的尺寸只要除以某一個值就能夠轉(zhuǎn)換為rem了。通過js設(shè)置viewport的方法如下：

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

淘寶布局的第二個要點，就是html元素的font-size的計算公式，font-size = deviceWidth / 10：

接下來要解決的問題是，元素的尺寸該如何計算，比如說設(shè)計稿上某一個元素的寬為150px，換算成rem應(yīng)該怎么算呢？這個值等于設(shè)計稿標(biāo)注尺寸/該設(shè)計稿對應(yīng)的html的font-size。拿淘寶來說的，他們用的設(shè)計稿是750的，所以html的font-size就是75，如果某個元素時150px的寬，換算成rem就是150 / 75 = 2rem。

總結(jié)下淘寶的這些做法：

（1）動態(tài)設(shè)置viewport的scale

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

（2）動態(tài)計算html的font-size

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

（3）布局的時候，各元素的css尺寸=設(shè)計稿標(biāo)注尺寸/設(shè)計稿橫向分辨率/10

（4）font-size可能需要額外的媒介查詢，并且font-size不使用rem，這一點跟網(wǎng)易是一樣的。

最后還有一個情況要說明，跟網(wǎng)易一樣，淘寶也設(shè)置了一個臨界點，當(dāng)設(shè)備豎著時橫向物理分辨率大于1080時，html的font-size就不會變化了，原因也是一樣的，分辨率已經(jīng)可以去訪問電腦版頁面了。

淘寶H5與網(wǎng)易H5頁面的比較結(jié)果：

淘寶H5與網(wǎng)易H5頁面的共同點：

1、都能適配所有的手機設(shè)備，對于pad，網(wǎng)易與淘寶都會跳轉(zhuǎn)到pc頁面，不再使用觸屏版的頁面

2、都需要動態(tài)設(shè)置html的font-size

3、布局時各元素的尺寸值都是根據(jù)設(shè)計稿標(biāo)注的尺寸計算出來，由于html的font-size是動態(tài)調(diào)整的，所以能夠做到不同分辨率下頁面布局呈現(xiàn)等比變化

4、容器元素的font-size都不用rem，需要額外地對font-size做媒介查詢

5、都能應(yīng)用于尺寸不同的設(shè)計稿，只要按以上總結(jié)的方法去用就可以了

淘寶H5與網(wǎng)易H5頁面的適配不同點：

淘寶的設(shè)計稿是基于750的橫向分辨率，網(wǎng)易的設(shè)計稿是基于640的橫向分辨率，還要強調(diào)的是，雖然設(shè)計稿不同，但是最終的結(jié)果是一致的，設(shè)計稿的尺寸一個公司設(shè)計人員的工作標(biāo)準(zhǔn)，每個公司不一樣而已

淘寶還需要動態(tài)設(shè)置viewport的scale，網(wǎng)易不用

最重要的區(qū)別就是：網(wǎng)易的做法，rem值很好計算，淘寶的做法肯定得用計算器才能用好了

如果想要簡單點，直接可以在header里面 加上這一行淘寶的webAPP 適配代碼

<script>!(function(c,f){var s=c.document;var b=s.documentElement;var m=s.queryor('meta[name="viewport"]');var n=s.queryor('meta[name="flexible"]');var a=0;var r=0;var l;var d=f.flexible||(f.flexible={});if(m){console.warn("將根據(jù)已有的meta標(biāo)簽來設(shè)置縮放比例");var e=m.getAttribute("content").match(/initial-scale=([d.]+)/);if(e){r=parseFloat(e[1]);a=parseInt(1/r)}}else{if(n){var j=n.getAttribute("content");if(j){var q=j.match(/initial-dpr=([d.]+)/);var h=j.match(/maximum-dpr=([d.]+)/);if(q){a=parseFloat(q[1]);r=parseFloat((1/a).toFixed(2))}if(h){a=parseFloat(h[1]);r=parseFloat((1/a).toFixed(2))}}}}if(!a&&!r){var p=c.navigator.appVersion.match(/android/gi);var o=c.navigator.appVersion.match(/iphone/gi);var k=c.devicePixelRatio;if(o){if(k>=3&&(!a||a>=3)){a=3}else{if(k>=2&&(!a||a>=2)){a=2}else{a=1}}}else{a=1}r=1/a}b.setAttribute("data-dpr",a);if(!m){m=s.createElement("meta");m.setAttribute("name","viewport");m.setAttribute("content","initial-scale="+r+", maximum-scale="+r+", minimum-scale="+r+", user-scalable=no");if(b.firstElementChild){b.firstElementChild.appendChild(m)}else{var g=s.createElement("div");g.appendChild(m);s.write(g.innerHTML)}}function i(){var t=b.getBoundingClientRect().width;if(t/a>750){t=750*a}var u=t/10;b.style.fontSize=u+"px";d.rem=c.rem=u}c.addEventListener("resize",function(){clearTimeout(l);l=setTimeout(i,300)},false);c.addEventListener("pageshow",function(t){if(t.persisted){clearTimeout(l);l=setTimeout(i,300)}},false);if(s.readyState==="complete"){s.body.style.fontSize=12*a+"px"}else{s.addEventListener("DOMContentLoaded",function(t){s.body.style.fontSize=12*a+"px"},false)}i();d.dpr=c.dpr=a;d.refreshRem=i})(window,window["lib"]||(window["lib"]={}));
</script>

完整的淘寶H5適配案例：http://huodong.m.taobao.com/act/yibo.html