文章目录

有时我们在的页面会设计一套适用与PC,一套适用于移动设备访问的网站,我们可以通过nginx配置来区分访问设备的UA从而跳转到不同的页面,或者直接使用JS跳转。

  • nginx 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    location / {
    #默认PC端访问内容
    root /www/web;

    #如果是手机移动端访问内容
    if ( $http_user_agent ~* "(Mobile)" )
    {
    root /www/mobile;
    }

    index index.html index.htm;
    }
  • 使用JS来跳转
    在访问的根路径增加默认界面(这个方法会跳转到指定URL,不能隐藏URL地址)

    index.html
    1
    2
    3
    4
    5
    6
    7
    <script type="text/javascript">
    if(/Mobile/i.test(navigator.userAgent)){
    location.href='mobile';
    }else{
    location.href='web';
    }
    </script>

  • nodejs 后台判断

    1
    2
    3
    4
    5
    6
    app.get('/',function*(){
    var index = 'desktop';
    var userAgent = this.req.headers['user-agent'];
    if(/Mobile/i.test(userAgent))index = 'mobile';
    yield this.render(index);
    });

判断移动设备的正则可以直接使用/Mobile/来判断,不比写长长的设备名正则。当然如果你要更详细的区分设备,比如Android和苹果访问不同页面,PAD和手机等系别区分则再去增加相应的正则判断即可。

此文是本站原创,转载请标注作者和链接出处!