1、js 識別
1.1 pc端 和 移動端 代碼分開( 各是一個單頁應用,或各有一套代碼)
直接在 pc端的首頁 index.html 的 head 里加入識別代碼
<script type="text/javascript">
if(/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(navigator.userAgent)) {
window.location.replace("mobile-url.html");
}
</script>
1.2 pc端 和 移動端 代碼 在一個單頁系統里(使用路由)
pc端和移動端兩套樣式在vue中的切換
vue項目PC兼容移動端
vue如何在一個工程里顯示pc和手機端
2、后端識別 (適用於 pc端和移動端各有一套代碼,或者各有一個頁面)
2.1、使用 NGINX 識別
如果前端頁面時用 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;
}