瀏覽器檢測

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

    這個屬性將返回用戶代理頭的字符串，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

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

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

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

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

檢測網(wǎng)絡連接方式

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

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

設置meta

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

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />

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

設置media

    我們可以利用link標簽的media屬性來限制CSS的應用范圍，通過max-device-width：480px 屏蔽PC；通過only screen屏蔽屏幕閱讀設備； 通過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) { … }

設置網(wǎng)頁的桌面快捷方式圖標

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

<link rel="apple-touch-icon" href="apple-touch-icon.png"/> <link rel="apple-touch-startup-image" href="startup.png"/>

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

baidu.page.setWebApp

隱藏地址欄

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

window.scrollTo(0, 1);

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

    但是有時候我們發(fā)現(xiàn)還是隱藏不了地址欄，為什么呢？大多時候是因為頁面高度不夠隱藏地址欄，這樣我們需要先 把body高度設置夠搞，隱藏地址欄后再還原回來，

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ù)值， 怎么辦呢，嗯，看來還需要一個回調(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); };

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

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

    我們可以通過獲取orientation的值來判斷翻轉(zhuǎn)狀態(tài)，那如果設備不支持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)站建設經(jīng)常使用position:fixed，在iphone上似乎并不管用，官方給了很多解釋，但是它還是不好使，這樣我們只能自己來 實現(xiàn)這種效果，首先我們需要一個setPosition方法，

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

然后，我們需要注冊scroll事件和onrientation事件

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

overflow:scroll

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

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