H5 頁面适配所有 iPhone 和安卓機型的六個技巧

目前，很多APP設計師小夥伴已經開始轉向H5前端開發啦，但是解決所有iPhone和安卓機型的适配問題是我們的重中之重。無論是設計APP還是寫前端H5.都是要考慮移動端的相容性。

25學堂今天跟大家來回顧一下H5頁面去适配所有iPhone和安卓機型的一些技巧和辦法。

回歸正題，相容iphone各版本機型最佳的方式就是自适應。

1、viewport 簡單粗暴的方式：

直接設定viewport為320px的1.3倍，将頁面放大1.3倍。

為什麼是1.3？

目前大部分頁面都是以320px為基準的布局，而iphone6的寬度比是375/320 = 1.171875，iphone6+則是 414/320 = 1.29375那麼以1.29倍也就約等于1.3了。

2、ip6+ 的CSS media query

PS: 也可以直接使用實際的device-width：如 <code>device-width : 375px</code>

在原有頁面的基礎上，再針對相應的螢幕大小單獨寫樣式做适配。

3、REM布局

REM是CSS3新增的一種機關，并且移動端的支援度很高，android2.x+，ios5+ 都支援。REM是相對于dom結構的根元素來設定大小，也就是html這個元素。相較于em機關，rem使用上更容易了解及運用。

假設，html我們設定font-size:12px; 也就是說12px相對于1rem，那麼18px也就是 18/12 = 1.5rem。

那麼我們以320px的設計布局為基準，将html設定為font-size:100px，即100px = 1rem。(設定100px是為了友善計算)那麼可以将大部分px機關除以100就可以直接改成rem機關了。

REM如何做響應式布局？

1、如果僅僅是适配ip6+裝置，那麼使用media query就行。

僞代碼如下：

這樣，在ip6下，也就将頁面内的元素放大了1.17倍，ip6+下也就是放大了1.29倍。

2、如果是完全自适應，那麼可以通過JS來控制。

頁面初始化的時候計算font-size，然後再綁定resize事件。這種效果就和百分比布局一樣了。

那麼用REM做機關與百分比做機關有什麼優勢？

主要優勢在于能更好的控制元素大小。（一般百分比應用在布局層，一般常見設定為50%，33.3%，25%之類的整數居多，難以運用在複雜的頁面小部件内）。但是相比百分比布局，需要借助JS或media query實作，略有一點瑕疵。

DEMO位址

4、圖檔自适應

剛說完REM布局，那麼用百分比布局也能實作一樣的效果，但是用百分比布局，必須要面臨一個問題：圖檔寬度100%，頁面加載時會存在高度塌陷的問題。.

那麼可以用padding-top設定百分比值來實作自适應。

公式如下：

padding-top = (Image Height / Image Width) * 100%

相關代碼實作：

DEMO位址，縮放浏覽器視窗看看。

5、圖檔高清化

大家都知道，iphone6 plus 是3倍高清圖了，它的devicePixelRatio = 3。

在ios8下，已經開始支援img的 <code>srcset</code> 屬性了（目前移動端也就ios8開始支援），也就是說，可以對一張圖檔設定2個URL，浏覽器自動加載對應的圖檔。

支援程度如下：

黃色表示僅支援舊的srcset規範，綠色表示支援全新的srcset規範，包括sizes屬性，w描述符。 這裡不展開，詳細了解可自行google。

如下DEMO，請切換devicePixelRatio值進行檢視：

不過目前前端這邊圖檔的實作基本都用lazyload的方式實作。srcset的圖檔加載方式在實際項目中運用還比較少。

6、背景圖高清化

media query 實作高清化

img标簽的高清化，可以通過JS判斷devicePixelRatio的值來加載不同尺寸的圖檔，但是對于背景圖，寫在CSS中的，用JS來判斷就略麻煩了，還好CSS通過media query也能判斷dpr。

目前相容性最好的背景圖高清化實作方式，使用media query的 <code>-webkit-min-device-pixel-ratio</code> 做判斷：

進一步，可以通過工具生成相應的3x，2x，1x的圖檔及css，在使用時直接引用即可。誰搞一個？

image-set，它是Webkit的私有屬性，也是Css4的一個屬性，它是為了解決Retina螢幕下的圖像顯示而生。

使用方式也很簡單。僞代碼如下：

目前移動端的支援程度來看，ios7+，android 4.4+ 下已經支援了。如果僅僅是做ip6+的高清适配方案。 <code>image-set</code> 也是一種實作方案。

使用image-set 與 media query 實作有什麼差別及好處？

大體的意思是：image-set不需要告訴浏覽器使用什麼圖像，而是直接提供了圖像讓浏覽器選擇。這就意味着，如果在低網速下，浏覽器可以選擇加載低分辨率的圖檔。（PS：好智能的樣子）

但是相比如media query的實作，image-set僅支援單個圖檔的高清化，不适合在css sprite下使用。 并且相容性也是一大硬傷。

一般來說，用在LOGO區域，單個圖檔圖示的區域下，也是個不錯的選擇。

關于圖檔清單适配，也就是要讓布局更靈活，在電商網站裡面，商品清單是一個非常常見的結構。一種比較智能的清單方式是：兩端對齊，間距自适應。

那麼可以使用FLEXBOX布局來實作兩端對齊的效果，也可以使用 <code>text-align:justify</code> 的方式實作。