如何識別用戶是通過 PC、iPad 還是手機來訪問網站？

01-06

現在需要開發一個網站，要求是做到 PC，iPad，3G 手機同步訪問，如何區分三種方式？

如果要做到同步的話，應該伺服器上掛三個網站，根據訪問方式定向到對應的網站？

因為蘋果不支持 Flash，所以我做了2個頁面，如何讓蘋果手機自動跳轉到指定頁面？

希望有經驗的人能夠貼出代碼，或講解思路。謝謝。

這是如何做響應性開發的問題。

首先要明確響應策略，這是前提。因產品而異。大體上分三類支持：

1. PC和iPad等10寸平板是一類，UI可以一致（這樣PC上的設計要考慮對觸屏友好）

2. 3寸的智能手機是一類，UI重新設計

3. WAP手機上，沒UI。可認為是第2類的純內容版

這三類設備通過在伺服器端判斷user agent跳轉到不同URL上。就你的問題而言應該是「表面上」做2個網站支持。為什麼說表面上，因為是不同的UI和URL看起來是兩個網站。但實際開發上，data層是一樣的，view層做兩套。

agent = request.environ.get("HTTP_USER_AGENT", "")

if ("AppleWebKit" in agent and "Mobile" in agent):

templ = "templ_mobile"

else:

templ = "templ"

return st(templ, **locals())

只是示例，實際上UA的情況更複雜。

對於第1類，如果需要再進一步區分PC和觸屏設備。差別不大的話，UI上可以用css的media query識別。JS上可以用modernizr識別。仍然是優先考慮觸屏，然後fallback到PC方案上。如果覺得引用modernizr太重了，可以單用一些簡單判斷（參考modernizr的源碼）

比如最近做過一個播放器：

//判斷是否支持原生的audio標籤：

useFlash = (function() {

var a = document.createElement("audio");

return !(a.canPlayType a.canPlayType("audio/mpeg;").replace(/no/, ""));

})()

if (useFlas) {

player = new FlashPlayer(options);

} else {

player = new Html5Player(options);

}

player.play();

Flash做為fallback方案，這裡的Flash是一個無形的組件，負責播放和JS通訊。FlashPlayer和Html5Player這個兩個類封裝成相同的接囗。

我覺得大部分情況下不需要跳轉到一個新頁面。實現局部響應，也可以考慮用iframe。

響應性開發的複雜度不完全在開發上，對設計也有要求。但相比維護多站成本還是小的多。

我來搶答了。。

目前已經獲得的成就就是在nginx上搞了一個detector，用於識別終端和設備類型。

識別方式其實類似其他幾個回答里描述的，主要還是依賴用戶發出請求的ua信息，http請求到nginx的時候，會對ua進行解析，然後將識別結果放到http頭裡轉發給下游的應用。這樣，後端前端都可以拿到解析結果。

由於UA不一定準確，或者信息不夠全，我們也會在用戶第一次訪問的時候，頁面上插一個腳本來計算用戶終端的設備尺寸和像素尺寸、是否支持觸屏及dpi等，然後放到cookie中，這樣nginx還可以綜合cookie + ua進行判斷，比如物理像素大於720就可以判斷此設備可能是pad（也可能是國產超級大屏手機

至於後續應用拿到解析結果怎麼使用，就可以發揮各種想像了。

天貓這邊是一個域名對應多個不同終端類型的頁面，每個終端類型都會有一份緩存啥的。

請訪問這個網站，有現成的腳本可以使用，所有平台的都有。

Detect Mobile Browsers

第一步先在伺服器端使用User Agent判斷，先匹配出移動設備，這一步可以統計User Agent列表(可通過網站訪問日誌獲取或者使用自己的設備收集)，寫出匹配設備的正則表達式(比如iPhone/Touch系列的匹配規則是/iPhone OS/i，如果要適配系統版本號，規則會更複雜)，根據匹配結果做對應的網站版本輸出。
需要注意的是在智能手機在移動CMWAP接入方式下User-Agent會被網關過濾，所以在第一步伺服器端判斷UA後可以再在瀏覽器端對伺服器端獲取不到UA的訪問設備使用Javascript進行二次判斷。
有三種方式，根據第一步的匹配結果：
a. 跳轉到不同的網址，對三個網站進行分別維護 (例子：Facebook，國內各大門戶)
b. 同一個網址，針對不同設備使用不同的頁面模板輸出頁面 (例子：deviantArt、 Tumblr)
c. 只使用一套前端展示，對各種設備做集中適配(UI布局的自適應、前端技術的綜合兼容，例子：http://cubiq.org)
前兩種方式後端維護成本較高，適合移動端和PC端產品內容形態不同的情況，第三種方式適合各平台內容一致的情況，後端維護成本較小，但是對前端技術和UI布局要求非常高。
參見樓上的解決方案

類似的

//判斷訪問的設備信息

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf("android") != -1) {

window.location = path + "/DownloadSoftWare/" + name + "/" + id+ "/";

} else if (ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1) {

alert("要改為蘋果官網下載地址");

//window.top.location = "蘋果官網";

} else if (ua.indexOf("Window NT")) {

window.top.location = path + "/";

} else {

alert("sorry，暫不支持您的系統下載！！");

}

額，http協議的request headers中包含了user-agent這個key，獲取這個key-value就可以判斷是用什麼訪問了，當然，也是可以偽造的。。。。