Html開(kāi)發(fā)之Viewport的使用
近年來(lái)隨著移動(dòng)端的快速發(fā)展,越來(lái)越多傳統(tǒng)的web應(yīng)用需要適配移動(dòng)終端,下面記錄一下如何通過(guò)viewport實(shí)現(xiàn)簡(jiǎn)單的不同型號(hào)的手機(jī)端的適配問(wèn)題。不過(guò)在此之前,介紹一下如何通過(guò)Chrome瀏覽器,調(diào)試在移動(dòng)終端上的效果。
調(diào)試工具
首先我們打開(kāi)chrome谷歌瀏覽器,輸入天貓地址(實(shí)現(xiàn)了手機(jī)端適配),按F12進(jìn)入開(kāi)發(fā)者模式。進(jìn)入如下的界面:
接下來(lái)點(diǎn)擊右下方圈紅的部分,可以調(diào)出另一個(gè)控制臺(tái),如下界面:
選擇某個(gè)Device-設(shè)備,點(diǎn)擊Emulate,之后重新刷新頁(yè)面即可看到效果,這里我選中iphone5,具體效果如下:
可以知道的是天貓是做了移動(dòng)端的適配的。
支持移動(dòng)端
知道了如何進(jìn)行調(diào)試之后,如何支持移動(dòng)端呢。這里主要是通過(guò)Viewport來(lái)實(shí)現(xiàn)移動(dòng)端的適配的。其實(shí)仔細(xì)觀察一些使用HTML5開(kāi)發(fā)手機(jī)應(yīng)用或手機(jī)網(wǎng)頁(yè)時(shí),我們可能(有些可能不是通過(guò)viewport來(lái)實(shí)現(xiàn)適配的)會(huì)發(fā)現(xiàn)如下代碼:
- <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
那么Viewport是什么呢?
手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的窗口-viewport中的,通常情況下這個(gè)虛擬的窗口比屏幕寬,這樣就不用吧每個(gè)網(wǎng)頁(yè)擠到很小的窗口中(這樣會(huì)破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局),此時(shí)雖然顯示不完全,但是用戶仍可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的內(nèi)容。viewport就是讓網(wǎng)頁(yè)開(kāi)發(fā)者通過(guò)其大小,動(dòng)態(tài)的設(shè)置其網(wǎng)頁(yè)內(nèi)容中控件元素的大小,從而使得在瀏覽器上實(shí)現(xiàn)和web網(wǎng)頁(yè)中相同的效果(比例縮小)。
當(dāng)然,更加優(yōu)秀的做法是類似天貓的做法:針對(duì)手機(jī)端重新進(jìn)行頁(yè)面設(shè)計(jì)、布局,因?yàn)槭謾C(jī)屏幕畢竟有限,按照web頁(yè)面等比縮小的方式較之最原始有改進(jìn),但是如何在小屏幕上展示最合適的內(nèi)容給用戶的設(shè)計(jì)才是最貼切的。
不過(guò)對(duì)于一些沒(méi)有太多要求的,可以簡(jiǎn)單的通過(guò)viewport實(shí)現(xiàn)適配。
Viewport語(yǔ)法
width:控制viewport的大小,一般情況下指定為device-width(單位為縮放為100%的CSS像素),也可以指定一個(gè)固定的值例如600.
height:和width相應(yīng),指定高度。
initial-scal:初始縮放比例,頁(yè)面***次load的時(shí)候的縮放比例。
maximum-scale:允許用戶縮放到的***比例。
minimum-scale:允許用戶縮放到的最小比例。
user-scalable:用戶是否可以手動(dòng)縮放。
Demo
了解了Viewport接下來(lái),我們實(shí)現(xiàn)一個(gè)小Demo,web版2048游戲的手機(jī)適配,web上的效果如下圖:
接下來(lái)的邏輯便是通過(guò)實(shí)際的設(shè)備大小,調(diào)整元素大小,核心代碼:
- 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
- {
- //手機(jī)端額外處理頭部
- 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);
- //設(shè)置頭部
- $('.header').css('width',headerWidth);
- $('#newGame').css('width',headerWidth*0.20+'px');
- $('#topScore').css('width',headerWidth*0.40*0.90+'px');
- }
之后通過(guò)chrome瀏覽器即可看到在各個(gè)手機(jī)端上的效果: