Html開發(fā)之viewport的使用

    最近幾年來隨著移動真?zhèn)€快速發(fā)展,愈來愈多傳統(tǒng)的web利用需要適配移動終端,下面記錄1下如何通過viewport實現(xiàn)簡單的不同型號的手機真?zhèn)€適配問題。不過在此之前,介紹1下如何通過Chrome閱讀器,調(diào)試在移動終端上的效果。

調(diào)試工具

     首先我們打開chrome谷歌閱讀器,輸入天貓地址(實現(xiàn)了手機端適配),按F12進入開發(fā)者模式。進入以下的界面:

      接下來點擊右下方圈紅的部份,可以調(diào)出另外一個控制臺,以下界面:

      選擇某個Device-裝備,點擊Emulate,以后重新刷新頁面便可看到效果,這里我選中iphone5,具體效果以下：

         可以知道的是天貓是做了移動真?zhèn)€適配的。

支持移動端

       知道了如何進行調(diào)試以后,如何支持移動端呢。這里主要是通過Viewport來實現(xiàn)移動真?zhèn)€適配的。其實仔細視察1些使用HTML5開發(fā)手機利用或手機網(wǎng)頁時,我們可能（有些可能不是通過viewport來實現(xiàn)適配的）會發(fā)現(xiàn)以下代碼：

        那末Viewport是甚么呢?

       
手機閱讀器是把頁面放在1個虛擬的窗口-viewport中的,通常情況下這個虛擬的窗口比屏幕寬,這樣就不用吧每一個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒
有針對手機閱讀器優(yōu)化的網(wǎng)頁的布局）,此時雖然顯示不完全,但是用戶仍可以通過平移和縮放來看網(wǎng)頁的內(nèi)容。viewport就是讓網(wǎng)頁開發(fā)者通過其大小,
動態(tài)的設(shè)置其網(wǎng)頁內(nèi)容中控件元素的大小,從而使得在閱讀器上實現(xiàn)和web網(wǎng)頁中相同的效果(比例縮小)。

        固然,更加優(yōu)秀的做法是類似天貓的做法:針對手機端重新進行頁面設(shè)計、布局,由于手機屏幕畢竟有限,依照web頁面等比縮小的方式較之最原始有改進，但是如何在小屏幕上展現(xiàn)最適合的內(nèi)容給用戶的設(shè)計才是最貼切的。

        不過對1些沒有太多要求的,可以簡單的通過viewport實現(xiàn)適配。

Viewport語法

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

         height:和width相應(yīng),指定高度。

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

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

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

         user-scalable:用戶是不是可以手動縮放。

Demo

         了解了Viewport接下來,我們實現(xiàn)1個小Demo,web版2048游戲的手機適配,web上的效果以下圖:

       接下來的邏輯便是通過實際的裝備大小,調(diào)劑元素大小,核心代碼:

       以后通過chrome閱讀器便可看到在各個手機端上的效果:

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈