自动识别pc端移动端，并跳转

Posted 2020-12-13 zhanglw456

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;

}