HTML-Html開發之Viewport的使用

近年來隨着移動端的快速發展,愈來愈多傳統的web應用須要適配移動終端,下面記錄一下如何經過viewport實現簡單的不一樣型號的手機端的適配問題。不過在此以前,介紹一下如何經過Chrome瀏覽器,調試在移動終端上的效果。

調試工具

     首先咱們打開chrome谷歌瀏覽器,輸入天貓地址(實現了手機端適配),按F12進入開發者模式。進入以下的界面:

    接下來點擊右下方圈紅的部分,能夠調出另外一個控制檯,以下界面:

 選擇某個Device-設備,點擊Emulate,以後從新刷新頁面便可看到效果,這裏我選中iphone5,具體效果以下：

    能夠知道的是天貓是作了移動端的適配的。

支持移動端

       知道了如何進行調試以後,如何支持移動端呢。這裏主要是經過Viewport來實現移動端的適配的。其實仔細觀察一些使用HTML5開發手機應用或手機網頁時,咱們可能（有些可能不是經過viewport來實現適配的）會發現以下代碼：

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

      那麼Viewport是什麼呢?

        手機瀏覽器是把頁面放在一個虛擬的窗口-viewport中的,一般狀況下這個虛擬的窗口比屏幕寬,這樣就不用吧每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局）,此時雖然顯示不徹底,可是用戶仍能夠經過平移和縮放來看網頁的內容。viewport就是讓網頁開發者經過其大小,動態的設置其網頁內容中控件元素的大小,從而使得在瀏覽器上實現和web網頁中相同的效果(比例縮小)。

        固然,更加優秀的作法是相似天貓的作法:針對手機端從新進行頁面設計、佈局,由於手機屏幕畢竟有限,按照web頁面等比縮小的方式較之最原始有改進，可是如何在小屏幕上展現最合適的內容給用戶的設計纔是最貼切的。

        不過對於一些沒有太多要求的,能夠簡單的經過viewport實現適配。

Viewport語法

         width:控制viewport的大小，通常狀況下指定爲device-width(單位爲縮放爲100%的CSS像素),也能夠指定一個固定的值例如600.

         height:和width相應,指定高度。

         initial-scal:初始縮放比例,頁面第一次load的時候的縮放比例。

         maximum-scale:容許用戶縮放到的最大比例。

         minimum-scale:容許用戶縮放到的最小比例。

         user-scalable:用戶是否能夠手動縮放。

Demo

         瞭解了Viewport接下來,咱們實現一個小Demo,web版2048遊戲的手機適配,web上的效果以下圖:

 接下來的邏輯即是經過實際的設備大小,調整元素大小,核心代碼:

var documentWidth = window.screen.availWidth;
var gridContainerWidth = 0.92*documentWidth;
var cellSideLength = 0.18*documentWidth;
var cellSpace = 0.04*documentWidth;
var headerWidth=window.screen.availWidth;
function prepareForMobile(){
    if(documentWidth>500){
        //web端
        gridContainerWidth =500;
        cellSpace=20;
        cellSideLength=100;
        headerWidth = 500;
    }else
    {
        //手機端額外處理頭部
        headerWidth = headerWidth*0.92;
    }
    $('#grid-container').css('width',gridContainerWidth - 2*cellSpace);
    $('#grid-container').css('height',gridContainerWidth - 2*cellSpace);
    $('#grid-container').css('padding',cellSpace);
    $('#grid-container').css('border-radius',0.02*gridContainerWidth);
    $('.grid-cell').css('width',cellSideLength);
    $('.grid-cell').css('height',cellSideLength);
    $('.grid-cell').css('border-radius',0.02*cellSideLength);
    //設置頭部
    $('.header').css('width',headerWidth);
    $('#newGame').css('width',headerWidth*0.20+'px');
    $('#topScore').css('width',headerWidth*0.40*0.90+'px');
}

以後經過chrome瀏覽器便可看到在各個手機端上的效果: