瀏覽器檢測
我們可以通過客戶端檢測也可以通過服務器端檢測，無論哪種檢測我們都離不來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已經實現，詳情可以看browser包下的方法實現。
在服務器端我們如何獲取user agent呢，我們可以從http頭裏面獲取，http頭一般包括如下屬性，
User-Agent Accept Accept-Charset Accept-Language Accept-Charset
這樣我們在服務器端直接從http頭中可以取到user agent，然後判斷方式可以借鑑客戶端。服務器端方式可以用來做適配，根據不同瀏覽器返回不同的頁面。
檢測網絡連接方式
如果我們可以知道用戶的入網方式，就可以爲用戶提供不同的體驗，在Android2.2以上版本，我們可以通過
navigator.connection
來判斷入網方式，有WIFI、CELL_2G、CELL_3G等。Iphone平臺上目前並沒有相應的接口。
設置meta
默認情況下，mobile會像PC上的瀏覽器一樣渲染頁面（默認的頁面寬度是980px，這個值是可以通過viewport的width屬性設置的），然後同比縮放以適應mobile的小屏幕（縮放比例可以通過minimum-scale和maxmum-scale進行設定），因此用戶在mobile看這個頁面時感覺字體就比較小了，也比較模糊，必須要放大才能看得真切。但是我們可以通過設置viewport來解決，
viewport有如下幾個屬性，width設置viewport的寬度，即mobile最初模擬PC瀏覽器的寬度，之後mobile會這個寬度展現的頁面同比縮放到mobile屏幕上。設置width=device-width後就不會再進行縮放了，因爲寬度正好和mobile的寬度相同（前提是沒有設置縮放比例）。 minimum-scale和maximum-scale是控制用戶允許設置的縮放比例的。user-scalable標識是否允許對頁面進行縮放，取值有兩個yes和no。設置爲no則不允許進行頁面縮放了。initial-scale設置 用戶最初看到頁面時的縮放比例。 我們可以直接在html頁面設置好，也可以通過JavaScript來設置，Tangram Mobile實現了相應的設置方法，
baidu.page.setNoScale 設置頁面默認不縮放，並且不可縮放
設置media
我們可以利用link標籤的media屬性來限制CSS的應用範圍，通過max-device-width：480px 屏蔽PC；通過only screen屏蔽屏幕閱讀設備； 通過orientation: portrait來區分橫屏豎屏，
@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) { … }
設置網頁的桌面快捷方式圖標
在iphone、itouch和ipad上，用戶可以爲網頁設置桌面快捷方式，系統會自動截圖爲網頁快捷方式生成一個圖標，但是截圖一般都不太好看， 我們可以事先爲網頁設置好快捷方式圖標，這樣系統會自動使用這個圖標。我們可以這樣設置，
第一行就是設置桌面快捷方式圖標的，圖標必須是57*57像素的文件，不需要自己做圓角和高亮效果，系統會自動幫你搞定這個 放在網頁根目錄會作用於下面的全部網頁，當然也可以爲每個頁面設置單獨的圖標。第二行是設置啓動畫面。我們也可以採用 Tangram Mobile的方法來設置，
baidu.page.setWebApp
隱藏地址欄
很多文檔介紹通過調用
window.scrollTo(0, 1);
就可以隱藏地址欄，但是通過實踐發現隱藏地址欄還是真夠坑爹的啊，只調用這一句話一般不會起作用，我們需要
function hideBar() { setTimeout( function() { window.scrollTo(0, 1); }, 0); };
但是有時候我們發現還是隱藏不了地址欄，爲什麼呢？大多時候是因爲頁面高度不夠隱藏地址欄，這樣我們需要先 把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); };
好了這回終於可以隱藏地址欄了，但是我們又發現獲取的innerHeight是隱藏地址欄之前的數值， 怎麼辦呢，嗯，看來還需要一個回調函數，這樣我們的方法又變成，
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); };
在實際應用的時候會發現有些機器反應比較慢，這樣setTimeout的時間也可以加長些，唉，隱藏個地址欄竟然也這麼麻煩， Tangram Mobile中已經實現了hideBar方法，還是建議大家直接使用baidu.page.hideBar吧。 有些時候需要判斷當前是否已經隱藏了地址欄，可以使用window.pageYOffset來判斷。
獲取設備翻轉狀態
我們可以通過獲取orientation的值來判斷翻轉狀態，那如果設備不支持orientation怎麼樣，那我們可以通過 innerWidth和innerHeight的比例來判斷翻轉狀態，代碼如下（取自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上我們經常使用position:fixed，在iphone上似乎並不管用，官方給了很多解釋，但是它還是不好使，這樣我們只能自己來 實現這種效果，首先我們需要一個setPosition方法，
function setPosition(top, left){ //根據top、left把元素設置到視圖區相應位置 }
然後，我們需要註冊scroll事件和onrientation事件
element.addEventListener('scroll', setPosition); element.addEventListener('onrientationchange', setPosition);
具體代碼可以參考Tangram Mobile的Toolbar組件
overflow:scroll
在iphone上開發web程序，overflow:scroll十分讓人頭疼，因爲iphone並不支持，官方依然給了很多解釋，我們還是需要自己來實現， 因爲不支持overflow:scroll，我們只能設置爲overflow:hidden，然後在內容上註冊scroll和touch事件，當touch事件被觸發的時候， 把隱藏的內容顯示出來。這個功能比較複雜，我們可以使用Tangram Mobile的Scroller組件。
注：ios5已經解決了position:fixed和overflow:scroll的問題