Mobile Web前端開發(fā)系列-常用技巧

瀏覽器檢測(cè)

我們可以通過客戶端檢測(cè)也可以通過服務(wù)器端檢測(cè)，無論哪種檢測(cè)我們都離不來user agent，在客戶端我們可以使用JavaScript訪問navigator.userAgent

這個(gè)屬性將返回用戶代理頭的字符串，iphone將返回，

UA:Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0_1 like Mac OS X; zh-cn) AppleWebKit/528.18 (KHTML, like Gecko)

Version/4.0 Mobile/7A400 Safari/528.16 ACCEPT:application/xml,

application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,**;q=0.5

這樣我們拿到字符串后可以通過正則表達(dá)式進(jìn)行判斷，對(duì)于瀏覽器的客戶端判斷Tangram Mobile已經(jīng)實(shí)現(xiàn)。

網(wǎng)站建設(shè)時(shí)在服務(wù)器端我們?nèi)绾潍@取user agent呢，我們可以從http頭里面獲取，http頭一般包括如下屬性，

User-Agent Accept Accept-Charset Accept-Language Accept-Charset

這樣我們?cè)诜?wù)器端直接從http頭中可以取到user agent，然后判斷方式可以借鑒客戶端。服務(wù)器端方式可以用來做適配，根據(jù)不同瀏覽器返回不同的頁面。

檢測(cè)網(wǎng)絡(luò)連接方式

如果我們可以知道用戶的入網(wǎng)方式，就可以為用戶提供不同的體驗(yàn)，在Android2.2以上版本，我們可以通過

navigator.connection來判斷入網(wǎng)方式，有WIFI、CELL_2G、CELL_3G等。Iphone平臺(tái)上目前并沒有相應(yīng)的接口。

設(shè)置meta

默認(rèn)情況下，mobile會(huì)像PC上的瀏覽器一樣渲染頁面（默認(rèn)的頁面寬度是980px，這個(gè)值是可以通過viewport的width屬性設(shè)置的），然后同比縮放以適應(yīng)mobile的小屏幕（縮放比例可以通過minimum-scale和maxmum-scale進(jìn)行設(shè)定），因此用戶在mobile看這個(gè)頁面時(shí)感覺字體就比較小了，也比較模糊，必須要放大才能看得真切。但是網(wǎng)站制作人員可以通過設(shè)置viewport來解決，

viewport有如下幾個(gè)屬性，width設(shè)置viewport的寬度，即mobile最初模擬PC瀏覽器的寬度，之后mobile會(huì)這個(gè)寬度展現(xiàn)的頁面同比縮放到mobile屏幕上。設(shè)置width=device-width后就不會(huì)再進(jìn)行縮放了，因?yàn)閷挾日煤蚼obile的寬度相同（前提是沒有設(shè)置縮放比例）。 minimum-scale和maximum-scale是控制用戶允許設(shè)置的縮放比例的。user-scalable標(biāo)識(shí)是否允許對(duì)頁面進(jìn)行縮放，取值有兩個(gè)yes和no。設(shè)置為no則不允許進(jìn)行頁面縮放了。initial-scale設(shè)置用戶最初看到頁面時(shí)的縮放比例。我們可以直接在html頁面設(shè)置好，也可以通過JavaScript來設(shè)置，Tangram Mobile實(shí)現(xiàn)了相應(yīng)的設(shè)置方法，baidu.page.setNoScale 設(shè)置頁面默認(rèn)不縮放，并且不可縮放

設(shè)置media

我們可以利用link標(biāo)簽的media屬性來限制CSS的應(yīng)用范圍，通過max-device-width：480px 屏蔽PC；通過only screen屏蔽屏幕閱讀設(shè)備；通過orientation: portrait來區(qū)分橫屏豎屏，

@media all and (min-width:500px) { … } @media (min-width:500px) { … } @media (orientation: portrait) { … }

@media all and (orientation: portrait) { … } @media screen and (min-width: 400px) and (max-width: 700px) { … }

設(shè)置網(wǎng)頁的桌面快捷方式圖標(biāo)

在iphone、itouch和ipad上，用戶可以為網(wǎng)頁設(shè)置桌面快捷方式，系統(tǒng)會(huì)自動(dòng)截圖為網(wǎng)頁快捷方式生成一個(gè)圖標(biāo)，但是截圖一般都不太好看，我們可以事先為網(wǎng)頁設(shè)置好快捷方式圖標(biāo)，這樣系統(tǒng)會(huì)自動(dòng)使用這個(gè)圖標(biāo)。我們可以這樣設(shè)置，

第一行就是設(shè)置桌面快捷方式圖標(biāo)的，圖標(biāo)必須是57*57像素的文件，不需要網(wǎng)頁設(shè)計(jì)師做圓角和高亮效果，系統(tǒng)會(huì)自動(dòng)幫你搞定這個(gè) 放在網(wǎng)頁根目錄會(huì)作用于下面的全部網(wǎng)頁，當(dāng)然也可以為每個(gè)頁面設(shè)置單獨(dú)的圖標(biāo)。第二行是設(shè)置啟動(dòng)畫面。我們也可以采用 Tangram Mobile的方法來設(shè)置，

baidu.page.setWebApp

隱藏地址欄

很多文檔介紹通過調(diào)用

window.scrollTo(0, 1);

就可以隱藏地址欄，但是通過實(shí)踐發(fā)現(xiàn)隱藏地址欄還是真夠坑爹的啊，只調(diào)用這一句話一般不會(huì)起作用，我們需要function hideBar() { setTimeout( function() { window.scrollTo(0, 1); }, 0); };

但是有時(shí)候我們發(fā)現(xiàn)還是隱藏不了地址欄，為什么呢？大多時(shí)候是因?yàn)轫撁娓叨炔粔螂[藏地址欄，這樣我們需要先把body高度設(shè)置夠搞，隱藏地址欄后再還原回來，

function hideBar() { document.body.style.height = Math.max(windows.innerHeight, windows.innerWidth) * 2 +

'px'; setTimeout( function() { window.scrollTo(0, 1); setTimeout( function() { document.body.style.height = windows.innerHeight + 'px'; }, 200); }, 0); };

好了這回終于可以隱藏地址欄了，但是我們又發(fā)現(xiàn)獲取的innerHeight是隱藏地址欄之前的數(shù)值，怎么辦呢，嗯，看來還需要一個(gè)回調(diào)函數(shù)，這樣我們的方法又變成，

function hideBar(fn) { document.body.style.height = Math.max(windows.innerHeight, windows.innerWidth) * 2 + 'px'; setTimeout( function()

{ window.scrollTo(0, 1); setTimeout( function() { document.body.style.height = windows.innerHeight + 'px'; fn && fn(); },

200); }, 0); };

在實(shí)際應(yīng)用的時(shí)候會(huì)發(fā)現(xiàn)有些機(jī)器反應(yīng)比較慢，這樣setTimeout的時(shí)間也可以加長些，唉，隱藏個(gè)地址欄竟然也這么麻煩， Tangram Mobile中已經(jīng)實(shí)現(xiàn)了hideBar方法，還是建議大家直接使用baidu.page.hideBar吧。有些時(shí)候需要判斷當(dāng)前是否已經(jīng)隱藏了地址欄，可以使用window.pageYOffset來判斷。

獲取設(shè)備翻轉(zhuǎn)狀態(tài)

我們可以通過獲取orientation的值來判斷翻轉(zhuǎn)狀態(tài)，那如果設(shè)備不支持orientation怎么樣，那我們可以通過 innerWidth和innerHeight的比例來判斷翻轉(zhuǎn)狀態(tài)，代碼如下（取自Tangram Mobile的getOrientation），

baidu.page.getOrientation = function() { if ("onorientationchange" in window)

{ return (window.orientation == 0 || window.orientation == 180) ? 'portrait' : 'landscape'; }

else { return (windows.innerHeight > windows.innerWidth) ? 'portrait' : 'landscape'; } };

position:fixed

在pc上網(wǎng)站建設(shè)經(jīng)常使用position:fixed，在iphone上似乎并不管用，官方給了很多解釋，但是它還是不好使，這樣我們只能自己來實(shí)現(xiàn)這種效果，首先我們需要一個(gè)setPosition方法，

function setPosition(top, left){ //根據(jù)top、left把元素設(shè)置到視圖區(qū)相應(yīng)位置 }

然后，我們需要注冊(cè)scroll事件和onrientation事件

element.addEventListener('scroll', setPosition); element.addEventListener('onrientationchange', setPosition);具體代碼可以參考Tangram Mobile的Toolbar組件

overflow:scroll

在iphone上開發(fā)web程序，overflow:scroll十分讓人頭疼，因?yàn)閕phone并不支持，官方依然給了很多解釋，我們還是需要自己來實(shí)現(xiàn)，因?yàn)椴恢С謔verflow:scroll，我們只能設(shè)置為overflow:hidden，然后在內(nèi)容上注冊(cè)scroll和touch事件，當(dāng)touch事件被觸發(fā)的時(shí)候，把隱藏的內(nèi)容顯示出來。這個(gè)功能比較復(fù)雜，我們可以使用Tangram Mobile的Scroller組件。

注：ios5已經(jīng)解決了position:fixed和overflow:scroll的問題


選擇一個(gè)心情

沈陽做網(wǎng)站、沈陽建站

Mobile Web前端開發(fā)系列-常用技巧

沈陽做網(wǎng)站、沈陽建站