( 轉)移動端H5頁面之iphone6的適配

時間 2019-11-12

標籤移動 h5 頁面 iphone6 iphone 適配欄目無線简体版

原文原文鏈接

原文地址：http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/css

iphone6 及 iphone 6 plus 已經出來一段時間了。不少移動端網站，之前寫死body 爲320px的，如今估計也忙着作適配了。html

大屏幕手機其實一直有，只是之前你們沒怎麼重視，移動端的H5頁面大部分都以320px爲基準寬度進行佈局，那些大屏屌絲android用戶也懶得去理，而如今iphone也搞起多屏幕，老闆們重視程度就不同了。前端

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

一、viewport 簡單粗暴的方式：

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

直接設置viewport爲320px的1.3倍，將頁面放大1.3倍。ios

爲何是1.3？web

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

二、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瀏覽器

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

三、REM佈局

REM是CSS3新增的一種單位，而且移動端的支持度很高，android2.x+，ios5+ 都支持。
REM是相對於dom結構的根元素來設置大小，也就是html這個元素。相較於em單位，rem使用上更容易理解及運用。iphone

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就行。
僞代碼以下：

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

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

二、若是是徹底自適應，那麼能夠經過JS來控制。

 
        ( 
        function 
        (doc, win) { 
       
        var 
        docEl = doc.documentElement, 
       
        resizeEvt =  
        'orientationchange' 
        in 
        window ?  
        'orientationchange' 
        :  
        'resize' 
        , 
       
        recalc =  
        function 
        () { 
       
        var 
        clientWidth = docEl.clientWidth; 
       
        if 
        (!clientWidth)  
        return 
        ; 
       
        docEl.style.fontSize = 100 * (clientWidth / 320) +  
        'px' 
        ; 
       
        }; 
       
        // Abort if browser does not support addEventListener 
       
        if 
        (!doc.addEventListener)  
        return 
        ; 
       
        win.addEventListener(resizeEvt, recalc,  
        false 
        ); 
       
        doc.addEventListener( 
        'DOMContentLoaded' 
        , recalc,  
        false 
        ); 
       
        })(document, window);

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

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

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

DEMO地址

See the Pen Jojaqw by hugo (@baofen14787) on CodePen.

四、圖片自適應

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

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

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

公式以下：

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

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

相關代碼實現：

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

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

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

See the Pen vEYzgv by hugo (@baofen14787) on CodePen.

五、圖片高清化

你們都知道，iphone6 plus 是3倍高清圖了，它的devicePixelRatio = 3。關於DPR的介紹能夠查看這篇文章《設備像素比devicePixelRatio簡單介紹》

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

支持程度以下：

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

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

See the Pen YPzOxB by hugo (@baofen14787) on CodePen.

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

六、背景圖高清化

media query 實現高清化

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

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

 
        /* 普通顯示屏(設備像素比例小於等於1)使用1倍的圖 */ 
       
        .css{ 
       
        background-image 
        :  
        url 
        (img_ 
        1 
        x.png); 
       
        } 
       
        /* 高清顯示屏(設備像素比例大於等於2)使用2倍圖  */ 
       
        @media only  
        screen 
        and (-webkit-min-device-pixel-ratio: 
        2 
        ){ 
       
        .css{ 
       
        background-image 
        :  
        url 
        (img_ 
        2 
        x.png); 
       
        } 
       
        } 
       
        /* 高清顯示屏(設備像素比例大於等於3)使用3倍圖  */ 
       
        @media only  
        screen 
        and (-webkit-min-device-pixel-ratio: 
        3 
        ){ 
       
        .css{ 
       
        background-image 
        :  
        url 
        (img_ 
        3 
        x.png); 
       
        } 
       
        }

進一步，能夠經過工具生成相應的3x，2x，1x的圖片及css，在使用時直接引用便可。誰搞一個？

關於移動設備的-webkit-min-device-pixel-ratio值，能夠查看該網頁的整理：http://bjango.com/articles/min-device-pixel-ratio/

image-set 實現高清化

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

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

 
        .css { 
       
        background-image 
        :  
        url 
        ( 
        1 
        x.png);     
        /*不支持image-set的狀況下顯示*/ 
       
        background 
        : -webkit-image-set( 
       
        url 
        ( 
        1 
        x.png)  
        1 
        x, 
        /* 支持image-set的瀏覽器的[普通屏幕]下 */ 
       
        url 
        ( 
        2 
        x.png)  
        2 
        x, 
        /* 支持image-set的瀏覽器的[2倍Retina屏幕] */ 
       
        url 
        ( 
        3 
        x.png)  
        3 
        x 
        /* 支持image-set的瀏覽器的[3倍Retina屏幕] */ 
       
        ); 
       
        }