近幾年來，隨着手機和pad的普及，越來越多的用戶選擇使用移動客戶端訪問網站，而為了獲取更好的用戶體驗，就需要針對不同的設備顯示出最合適的匹配，這樣就是近年來流行的“響應式web設計”。
響應式web設計是一種純前端技術js、css等實現的針對不同設備訪問同一網址看到不同的布局，是頁面內容更適合當前設備閱讀。但這個不是本文的重點，重點還是放在nginx如何實現上來。
本文要講的的是如何使用nginx區分pc和手機訪問不同的網站，是物理上完全隔離的兩套網站(一套移動端、一套pc端),這樣帶來的好處pc端和 移動端的內容可以不一樣，移動版網站不需要包含特別多的內容，只要包含必要的文字和較小的圖片，這樣會更節省流量。有好處當然也就會增加困難，難題就是你 需要維護兩套環境，並且需要自動識別出來用戶的物理設備並跳轉到相應的網站，當判斷錯誤時用戶可以自己手動切換回正確的網站。
下面以漢商網為實例來說明如何實現上面的需求。
明確的的需求：
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, path);
}
nginx增加如下配置，根據UA和cookie判斷當前是移動端還是PC端訪問
if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
set $mobile_request '1';
}
if ($http_cookie ~ 'mobile_request=full') {
set $mobile_request '';
}
if ($mobile_request = '1') {
rewrite ^.+ http://m.264.cn$uri;
}
移動版頁面添加PC版鏈接
默認用戶進來時會先判斷UA，如果是手機端訪問就會進入手機版，但也會存在誤判進入手機版或者需要更多信息進入PC版，那么就需要在移動版的頁面放入代碼，讓用戶可以從移動版切換到web版並且下次訪問會保留設置。
<a onclick="setCookie('iphone_mode', 'full', 1, '264.cn')" href="http://www.264.cn">
電腦版
</a>
如果用戶訪問不正確時，點擊電腦版鏈接就可以進入PC版網站，並且24小時內再次訪問會記憶上次訪問的網站類型設置。
PC版網站增加訪問手機版的鏈接
在PC版的網站適當的地方加入下面的鏈接讓用戶可以切換到手機版的網站。
<a onclick="deleteCookie('mobile_mode', '264.cn');" href="http://m.264.cn">
手機版
</a>
完整的nginx端配置，當然是去掉了與本文功能無關的配置，並不是一個完可用的配置，只是給大家一個整體的框架。
PC版網站配置
upstream app_server {
server 0.0.0.0:9001;
}
server {
listen 80;
server_name www.264.cn;
root /path/to/main_site;
# ...
location / {
proxy_set_header X-Real-IP $remote_addr;
# ...
if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
set $mobile_request '1';
}
if ($http_cookie ~ 'mobile_request=full') {
set $mobile_request '';
}
if ($mobile_request = '1') {
rewrite ^.+ http://m.264.cn$uri;
}
# serve cached pages ...
if (!-f $request_filename) {
proxy_pass http://app_server;
break;
}
}
}
手機移動版配置
upstream m_app_server {
server 0.0.0.0:9001;
}
server {
listen 80;
server_name m.264.cn;
root /path/to/mobile_site;
# ...
location / {
proxy_set_header X-Real-IP $remote_addr;
# ...
if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
set $mobile_request '1';
}
if ($http_cookie ~ 'mobile_request=full') {
set $mobile_request '';
}
if ($mobile_request != '1') {
rewrite ^.+ http://www.264.cn$uri;
}
# serve cached pages ...
if (!-f $request_filename) {
proxy_pass http://m_app_server;
break;
}
}
}