Mobile Web前端開(kāi)發(fā)系列-常用技巧
瀏覽器檢測(cè)
我們可以通過(guò)客戶端檢測(cè)也可以通過(guò)服務(wù)器端檢測(cè)，無(wú)論哪種檢測(cè)我們都離不來(lái)user agent 這個(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 這樣我們拿到字符串后可以通過(guò)正則表達(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ù)器端方式可以用來(lái)做適配，根據(jù)不同瀏覽器返回不同的頁(yè)面。 檢測(cè)網(wǎng)絡(luò)連接方式 如果我們可以知道用戶的入網(wǎng)方式，就可以為用戶提供不同的體驗(yàn)，在Android2.2以上版本，我們可以通過(guò) navigator.connection來(lái)判斷入網(wǎng)方式，有WIFI、CELL_2G、CELL_3G等。Iphone平臺(tái)上目前并沒(méi)有相應(yīng)的接口。 設(shè)置meta 默認(rèn)情況下，mobile會(huì)像PC上的瀏覽器一樣渲染頁(yè)面（默認(rèn)的頁(yè)面寬度是980px，這個(gè)值是可以通過(guò)viewport的width屬性設(shè)置的），然后同比縮放以適應(yīng)mobile的小屏幕（縮放比例可以通過(guò)minimum-scale和maxmum-scale進(jìn)行設(shè)定），因此用戶在mobile看這個(gè)頁(yè)面時(shí)感覺(jué)字體就比較小了，也比較模糊 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> viewport有如下幾個(gè)屬性，width設(shè)置viewport的寬度 設(shè)置media 我們可以利用link標(biāo)簽的media屬性來(lái)限制CSS的應(yīng)用范圍，通過(guò)max-device-width：480px 屏蔽PC；通過(guò)only screen屏蔽屏幕閱讀設(shè)備； 通過(guò)orientation: portrait來(lái)區(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)頁(yè)的桌面快捷方式圖標(biāo) 在iphone、itouch和ipad上，用戶可以為網(wǎng)頁(yè)設(shè)置桌面快捷方式，系統(tǒng)會(huì)自動(dòng)截圖為網(wǎng)頁(yè)快捷方式生成一個(gè)圖標(biāo)，但是截圖一般都不太好看， 我們可以事先為網(wǎng)頁(yè)設(shè)置好快捷方式圖標(biāo)，這樣系統(tǒng)會(huì)自動(dòng)使用這個(gè)圖標(biāo)。我們可以這樣設(shè)置， <link rel="apple-touch-icon" href="apple-touch-icon.png"/> <link rel="apple-touch-startup-image" href="startup.png"/> 第一行就是設(shè)置桌面快捷方式圖標(biāo)的，圖標(biāo)必須是57*57像素的文件，不需要網(wǎng)頁(yè)設(shè)計(jì)師做圓角和高亮效果，系統(tǒng)會(huì)自動(dòng)幫你搞定這個(gè) 放在網(wǎng)頁(yè)根目錄會(huì)作用于下面的全部網(wǎng)頁(yè)，當(dāng)然也可以為每個(gè)頁(yè)面設(shè)置單獨(dú)的圖標(biāo)。第二行是設(shè)置啟動(dòng)畫(huà)面。我們也可以采用 Tangram Mobile的方法來(lái)設(shè)置， baidu.page.setWebApp 隱藏地址欄 很多文檔介紹通過(guò)調(diào)用 window.scrollTo(0, 1); 就可以隱藏地址欄 但是有時(shí)候我們發(fā)現(xiàn)還是隱藏不了地址欄 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); }; 好了這回終于可以隱藏地址欄了 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í)間也可以加長(zhǎng)些，唉，隱藏個(gè)地址欄竟然也這么麻煩， Tangram Mobile中已經(jīng)實(shí)現(xiàn)了hideBar方法，還是建議大家直接使用baidu.page.hideBar吧。 有些時(shí)候需要判斷當(dāng)前是否已經(jīng)隱藏了地址欄，可以使用window.pageYOffset來(lái)判斷。 獲取設(shè)備翻轉(zhuǎn)狀態(tài) 我們可以通過(guò)獲取orientation的值來(lái)判斷翻轉(zhuǎn)狀態(tài)，那如果設(shè)備不支持orientation怎么樣，那我們可以通過(guò) innerWidth和innerHeight的比例來(lái)判斷翻轉(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上似乎并不管用，官方給了很多解釋?zhuān)撬€是不好使，這樣我們只能自己來(lái) 實(shí)現(xiàn)這種效果 function setPosition(top, left){ //根據(jù)top 然后，我們需要注冊(cè)scroll事件和onrientation事件 element.addEventListener('scroll', setPosition); element.addEventListener('onrientationchange', setPosition);具體代碼可以參考Tangram Mobile的Toolbar組件 overflow:scroll 在iphone上開(kāi)發(fā)web程序
