原文鏈接：http://www.nginx.cn/784.html
近幾年來，隨着手機和pad的普及，越來越多的用戶選擇使用移動客戶端訪問網站，而為了獲取更好的用戶體驗，就需要針對不同的設備顯示出最合適的匹配，這樣就是近年來流行的“響應式web設計”。
響應式web設計是一種純前端技術js、css等實現的針對不同設備訪問同一網址看到不同的布局，是頁面內容更適合當前設備閱讀。但這個不是本文的重點，重點還是放在nginx如何實現上來。
本文要講的的是如何使用nginx區分pc和手機訪問不同的網站，是物理上完全隔離的兩套網站(一套移動端、一套pc端),這樣帶來的好處pc端和移動端的內容可以不一樣，移動版網站不需要包含特別多的內容，只要包含必要的文字和較小的圖片，這樣會更節省流量。有好處當然也就會增加困難，難題就是你需要維護兩套環境，並且需要自動識別出來用戶的物理設備並跳轉到相應的網站，當判斷錯誤時用戶可以自己手動切換回正確的網站。
下面以264查詢網為實例來說明如何實現上面的需求。 明確的的需求： 1.制作兩個站點PC端網站www.264.cn，和移動端網站m.264.cn 2.使用pc或移動設備訪問任何一個域名都會跳到相應的站點。 3.用戶可以選擇訪問移動版還是PC版網站，移動版網站始終有切換到PC版的鏈接，PC版當網站通過手機訪問時會提供移動版網站的鏈接。 4.當用戶選着訪問其中一種類型的網站后，保存設置結果生效時間為24小時，當然長短可以自己設置。 簡單的服務器端實現方法 有兩套網站代碼，一套PC版放在/usr/local/website/web，一套移動版放在/usr/local/website/mobile。只需要修改nginx的配置文件件，nginx通過UA來判斷是否來自移動端訪問，實現不同的客戶端訪問不同內容。 這種方法的缺點是移動端和PC端用同一個域名，存在黑帽的嫌疑，而且UA並不是總是判斷的准確，如果判斷錯誤的情況下，用戶不能手動修改訪問的網站類型。 關鍵的Nginx配置如下：
location / { #默認PC端訪問內容 root /usr/local/website/web; #如果是手機移動端訪問內容 if ( $http_user_agent ~ "(MIDP)|(WAP)|(UP.Browser)|(Smartphone)|(Obigo)|(Mobile)|(AU.Browser)|(wxd.Mms)|(WxdB.Browser)|(CLDC)|(UP.Link)|(KM.Browser)|(UCWEB)|(SEMC\-Browser)|(Mini)|(Symbian)|(Palm)|(Nokia)|(Panasonic)|(MOT\-)|(SonyEricsson)|(NEC\-)|(Alcatel)|(Ericsson)|(BENQ)|(BenQ)|(Amoisonic)|(Amoi\-)|(Capitel)|(PHILIPS)|(SAMSUNG)|(Lenovo)|(Mitsu)|(Motorola)|(SHARP)|(WAPPER)|(LG\-)|(LG/)|(EG900)|(CECT)|(Compal)|(kejian)|(Bird)|(BIRD)|(G900/V1.0)|(Arima)|(CTL)|(TDG)|(Daxian)|(DAXIAN)|(DBTEL)|(Eastcom)|(EASTCOM)|(PANTECH)|(Dopod)|(Haier)|(HAIER)|(KONKA)|(KEJIAN)|(LENOVO)|(Soutec)|(SOUTEC)|(SAGEM)|(SEC\-)|(SED\-)|(EMOL\-)|(INNO55)|(ZTE)|(iPhone)|(Android)|(Windows CE)|(Wget)|(Java)|(curl)|(Opera)" ) { root /usr/local/website/mobile; } index index.html index.htm; }
純客戶端js實現方式 下面這段代碼放到首頁<head>和</head>之間即可
<script type="text/javascript">// <![CDATA[ if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ if(window.location.href.indexOf("?mobile")<0){ try{ if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ //觸屏手機版地址 window.location.href="http://m.264.cn"; }else if(/iPad/i.test(navigator.userAgent)){ //pad版地址 }else{ //普通手機版地址 window.location.href="http://wap.264.cn" } }catch(e){} } } // ]]></script>
推薦的nginx區別手機和PC訪問方法 利用前端js和后端nginx配合，js通過設置cookie來設定當前訪問哪頁面。
增加設置cookie的js代碼，這段代碼需要在移動網站和PC網站的所有頁面都要放置。
function createCookie(name, value, days, domain, path) { var expires = ''; if (days) { var d = new Date(); d.setTime(d.getTime() + (days*24*60*60*1000)); expires = '; expires=' + d.toGMTString(); } domain = domain ? '; domain=' + domain : ''; path = '; path=' + (path ? path : '/'); document.cookie = name + '=' + value + expires + path + domain; } function readCookie(name) { var n = name + '='; var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var c = cookies[i].replace(/^\s+/, ''); if (c.indexOf(n) == 0) { return c.substring(n.length); } } return null; } function eraseCookie(name, domain, path) { setCookie(name, '', -1, domain