ios 安卓

H5 頁面適配全部 iPhone 和安卓機型的六個技巧

 

目前，不少APP設計師小夥伴已經開始轉向H5前端開發啦，可是解決全部iPhone和安卓機型的適配問題是咱們的重中之重。不管是設計APP仍是寫前端H5.都是要考慮移動端的兼容性。

25學堂今天跟你們來回顧一下H5頁面去適配全部iPhone和安卓機型的一些技巧和辦法。

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

一、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了。
二、ip6+ 的CSS media query

1.  
   @media ( min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
2.  
   /*iphone 6*/
3.  
   }
4.  
    
5.  
   @media ( min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
6.  
   /*iphone 6 plus*/
7.  
   }

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

在原有頁面的基礎上，再針對相應的屏幕大小單獨寫樣式作適配。
三、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如何作響應式佈局？

一、若是僅僅是適配ip6+設備，那麼使用media query就行。

僞代碼以下：

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

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

二、若是是徹底自適應，那麼能夠經過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.  
    
10.  
    // Abort if browser does not support addEventListener
11.  
    if (!doc.addEventListener) return;
12.  
    win.addEventListener( resizeEvt, recalc, false);
13.  
    doc.addEventListener( 'DOMContentLoaded', recalc, false);
14.  
    })( document, window);

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

那麼用REM作單位與百分比作單位有什麼優點？

主要優點在於能更好的控制元素大小。（通常百分比應用在佈局層，通常常見設置爲50%，33.3%，25%之類的整數居多，難以運用在複雜的頁面小部件內）。可是相比百分比佈局，須要藉助JS或media query實現，略有一點瑕疵。

DEMO地址

id="cp_embed_Jojaqw" src="http://codepen.io/baofen14787/embed/Jojaqw?height=268&theme-id=10019&slug-hash=Jojaqw&default-tab=result&user=baofen14787" scrolling="no" frameborder="0" height="268" title="CodePen Embed" class="cp_embed_iframe" style="width:568px;overflow:hidden;">

四、圖片自適應

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

如圖：頁面加載時圖片高度默認不存在。

那麼能夠用padding-top設置百分比值來實現自適應。

公式以下：

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

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

相關代碼實現：

1.  
   <div class="cover">
2.  
   <img src="http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!!0-item_pic.jpg_160x160q90.jpg" alt=""/>
3.  
   </div>

1.  
   .cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}
2.  
   .cover img{position: absolute; top: 0; width: 100%;}

DEMO地址，縮放瀏覽器窗口看看。

id="cp_embed_vEYzgv" src="http://codepen.io/baofen14787/embed/vEYzgv?height=268&theme-id=0&slug-hash=vEYzgv&default-tab=result&user=baofen14787" scrolling="no" frameborder="0" height="268" title="CodePen Embed" class="cp_embed_iframe" style="width:568px;overflow:hidden;">

五、圖片高清化

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

關於DPR的介紹能夠查看這篇文章《 設備像素比devicePixelRatio簡單介紹 》

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

支持程度以下：

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

以下DEMO，請切換devicePixelRatio值進行查看：

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

六、背景圖高清化

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.  
    
6.  
   /* 高清顯示屏(設備像素比例大於等於2)使用2倍圖 */
7.  
   @ media only screen and (-webkit-min-device-pixel-ratio:2){
8.  
   .css{
9.  
   background-image: url(img_2x.png);
10.  
    }
11.  
    }
12.  
     
13.  
    /* 高清顯示屏(設備像素比例大於等於3)使用3倍圖 */
14.  
    @ media only screen and (-webkit-min-device-pixel-ratio:3){
15.  
    .css{
16.  
    background-image: url(img_3x.png);
17.  
    }
18.  
    }

進一步，能夠經過工具生成相應的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 與 media query 實現有什麼區別及好處？

這篇文章裏面作了很詳細的闡述，你們能夠看看：http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/

大致的意思是：image-set不須要告訴瀏覽器使用什麼圖像，而是直接提供了圖像讓瀏覽器選擇。這就意味着，若是在低網速下，瀏覽器能夠選擇加載低分辨率的圖片。（PS：好智能的樣子）

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

通常來講，用在LOGO區域，單個圖片圖標的區域下，也是個不錯的選擇。

關於圖片列表適配，也就是要讓佈局更靈活，在電商網站裏面，商品列表是一個很是常見的結構。一種比較智能的列表方式是：兩端對齊，間距自適應。

那麼可使用FLEXBOX佈局來實現兩端對齊的效果，也可使用 text-align:justify 的方式實現。