移動端頁面適配

前端開發中，尤爲移動端手機屏幕大小各異，該如何解決頁面適配的問題呢？下面從幾點進行了總結。

一、設計稿的佈局設計

　　咱們在進行H5頁面內容規劃佈局設計的時候，不能把重要的內容放在太偏下的位置或者偏上，不然前端佈局時可能出現內容顯示不全的狀況。

除去將瀏覽器全屏顯示的狀況，幾乎全部的狀況都會有頂部的狀態欄和導航欄。

　　iphone的設計標準，狀態欄和導航欄的獨立像素高度分別爲40px和88px。

　　因爲安卓系統能夠更改狀態欄和導航欄的高度，這裏能夠取默認值爲48px和100px。

　　那麼就會把網頁內容往下擠，進入盲區（根據不一樣的佈局方式可能擠出視口，便可視區域之下）取這兩個系統者的最大值爲148，設計稿要儘可能保證單頁下面148px沒有重要內容。

　　那麼在全部屏幕大小上把重要內容顯示徹底，就要注意市面上存在的小尺寸手機屏幕，如今絕大部分智能手機分辨率都在640*960px（iphone4分辨率）之上，因此只要把重要內容放在盲區之上便可，計算後的最安全高度爲812（960-148=812）。

　　在此總結，通常狀況下，以現有市場上流行的移動智能手機，單頁翻轉（非延伸向下的長頁面）設計稿尺寸爲640*1136，在高度爲812處設置一條安全線（參考線），將重要的內容佈局在這條安全線之上。

二、相對單位rem的使用

　　 手機頁面設計通常的大小是640，可是手機屏幕大小不肯定，那麼怎樣才能作出適應全部手機的手機頁面呢？

　　通常的解決方案有兩種，rem佈局和百分比佈局，我更推薦用rem佈局來製做手機頁面

　　rem佈局的兼容性：

　　Mozilla Firefox 3.6+ ，Apple Safari 5+，Google Chrome ，IE9+和Opera11+

　　IE6-8仍是別用rem了，不過在手機端，能夠忽略ie內核這個問題。

　　rem的計算公式

　　例：html設置font-size：16px ，1rem=16px

　　最核心的代碼就是這一段js運算了，根據頁面的大小來控制基礎rem的值，如下代碼基於jquery：

　　

//jq
var windowW = $(window).width();
var ratio = windowW/640;
$("html").css("fontSize",100*ratio+"px");
$(window).on("resize",function(){
    var windowW = $(window).width();
    var ratio = windowW/640;
    $("html").css("fontSize",100*ratio+"px");
});

//js
function cal(){
    var windowW =document.documentElement.clientWidth||document.body.clientWidth;
    var ratio = windowW/640;
    if(windowW>640){
        document.getElementsByTagName("html")[0].style.fontSize="100px";
    }else{
        document.getElementsByTagName("html")[0].style.fontSize=100*ratio+"px";
    }
}
cal();
window.onresize = function(){
    cal();
}

 

ps：附上移動端的判斷，可實現判斷瀏覽器爲移動端時，自動跳轉到手機版頁面連接

<script type="text/javascript">
 (function() { 　　 var is_iPd = navigator.userAgent.match(/(iPad|iPod|iPhone)/i) != null; 　　var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|win ce)/i) != null; 　　if(is_mobi && window.location.search.indexOf("mv=fp")<0){　　　　javascript:window.location.href="/wap"; 　　} })</script>