移動端H5頁面之iphone6的適配

標籤：

iphone6 及 iphone 6 plus 已經出來一段時間了。很多移動端網站，以前寫死body 為320px的，現在估計也忙著做適配了。


大螢幕手機其實一直有，只是以前大家沒怎麼重視，移動端的H5頁面大部分都以320px為基準寬度進行布局，那些大屏屌絲android使用者也懶得去理，而現在iphone也搞起多螢幕，老闆們重視程度就不一樣了。


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


1、viewport 簡單粗暴的方式：


<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">


直接設定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


@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){


/*iphone 6*/


}


@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){


/*iphone 6 plus*/


}


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


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


3、REM布局


REM是CSS3新增的一種單位，並且移動端的支援度很高，android2.x+，ios5+ 都支援。


REM是相對於dom結構的根項目來設定大小，也就是html這個元素。相較於em單位，rem使用上更容易理解及運用。


REM與PX的換算可以查看網址：https://offroadcode.com/prototypes/rem-calculator/


假設，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就行。


虛擬碼如下：

1. /*320px布局*/
2. html{font-size: 100px;}
3. body{font-size: 0.14rem /*實際相當於14px*/}
4. /* iphone 6 */
5. @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
6. html{font-size: 117.1875px;}
7. }
8. /* iphone6 plus */
9. @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
10. html{font-size: 129.375px;}
11. }

複製代碼

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


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

1. (function (doc, win) {
2. var docEl = doc.documentElement,
3. resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,
4. recalc = function () {
5. var clientWidth = docEl.clientWidth;
6. if (!clientWidth) return;
7. docEl.style.fontSize = 100 * (clientWidth / 320) + ‘px‘;
8. };
9. // Abort if browser does not support addEventListener
10. if (!doc.addEventListener) return;
11. win.addEventListener(resizeEvt, recalc, false);
12. doc.addEventListener(‘DOMContentLoaded’, recalc, false);
13. })(document, window);

複製代碼

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


那麼用REM做單位與百分比做單位有什麼優勢？


主要優勢在於能更好的控制元素大小。（一般百分比應用在布局層，一般常見設定為50%，33.3%，25%之類的整數居多，難以運用在複雜的頁面小組件內）。


但是相比百分比布局，需要藉助JS或media query實現，略有一點瑕疵。


4、圖片自適應


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


頁面載入時圖片高度預設不存在。


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


公式如下：


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


原理：padding-top值為百分比時，取值是是相對於寬度的。


.cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}


.cover img{position: absolute; top: 0; width: 100%;}


5、圖片高清化


大家都知道，iphone6 plus 是3倍高清圖了，它的devicePixelRatio = 3。 關於DPR的介紹可以查看這篇文章《裝置像素比devicePixelRatio簡單介紹》


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


支援程度如下：


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


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


6、背景圖高清化


media query 實現高清化


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


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

1. /* 普通顯示屏(裝置像素比例小於等於1)使用1倍的圖 */
2. .css{
3. background-image: url(img_1x.png);
4. }
5. /* 高清顯示屏(裝置像素比例大於等於2)使用2倍圖 */
6. @media only screen and (-webkit-min-device-pixel-ratio:2){
7. .css{
8. background-image: url(img_2x.png);
9. }
10. }
11. /* 高清顯示屏(裝置像素比例大於等於3)使用3倍圖 */
12. @media only screen and (-webkit-min-device-pixel-ratio:3){
13. .css{
14. background-image: url(img_3x.png);
15. }
16. }

複製代碼

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


關於行動裝置的-webkit-min-device-pixel-ratio值，可以查看該網頁的整理：http://bjango.com/articles/min-device-pixel-ratio/


image-set 實現高清化


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


使用方式也很簡單。虛擬碼如下：

1. .css {
2. background-image: url(1x.png); /*不支援image-set的情況下顯示*/
3. background: -webkit-image-set(
4. url(1x.png) 1x,/* 支援image-set的瀏覽器的[普通螢幕]下 */
5. url(2x.png) 2x,/* 支援image-set的瀏覽器的[2倍Retina螢幕] */
6. url(3x.png) 3x/* 支援image-set的瀏覽器的[3倍Retina螢幕] */
7. );
8. }

複製代碼

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


大體的意思是：image-set不需要告訴瀏覽器使用什麼映像，而是直接提供了映像讓瀏覽器選擇。這就意味著，如果在低網速下，瀏覽器可以選擇載入低解析度的圖片。（PS：好智能的樣子）


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


但是一般來說，用在LOGO地區，單個圖片表徵圖的地區下，也是個不錯的選擇。


7、圖片列表的自適應


關於適配，也就是要讓布局更靈活，在電商網站裡面，商品列表是一個非常常見的結構。


一種比較智能的列表方式是：左右對齊，間距自適應。


那麼可以使用FLEXBOX布局來實現左右對齊的效果，也可以使用text-align:justify的方式實現。


flexbox的布局方式，在PC端就不合適了，ie9以下都不支援，那麼更友好的方式可以使用text-align:justify來實現，相容各大主流瀏覽器，包括IE6。


詳情請移步我以前寫的博文：《inline-block + justify實現列表左右對齊》


但是這2種布局方式都有一定的局限性。就是列表個數必須湊整。目前還沒找到一種能夠相容不限個數的實現方案，如果各位看官有更好的實現方式，也歡迎提出，一起交流。


總結


移動端ip6的適配方案有很多，沒有固定的套路及方法，請根據自身業務的特點，選擇其中的一些方法組合使用。

移動端H5頁面之iphone6的適配