如何通过nginx区分客户端访问来自电脑还是手机，怎么返回不同的页面（思路）？

Posted 2023-04-24

何使用nginx区分pc和手机访问不同的网站，是物理上完全隔离的两套网站(一套移动端、一套pc端),这样带来的好处pc端和移动端 的内容可以不一样，移动版网站不需要包含特别多的内容，只要包含必要的文字和较小的图片，这样会更节省流量。有好处当然也就会增加困难，难题就是你需要维 护两套环境，并且需要自动识别出来用户的物理设备并跳转到相应的网站，当判断错误时用户可以自己手动切换回正确的网站。 参考技术A

nginx配置文件区分，还可以写用js来区分

参考技术B 没见过 参考技术C 哎 参考技术D 不知道为什么

使用JS判断访问设备是电脑还是手机

一、前言

有时在编写前端页面视图时，需要根据用户不同的访问设备（手机或电脑）对页面设置不同显示样式或跳转到不同的页面。可以使用JS代码获取Navigator对象的userAgent属性，通过对该属性值的分析就可以知道当前访问的设备是电脑还是手机。

一些常用设备访问时返回的userAgent属性如下：

访问设备	返回userAgent属性值
Win10电脑	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36 Edg/91.0.864.37
iphone手机	Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1 Mobile/15E148 Safari/604.1
华为安卓手机	Mozilla/5.0 (Linux; Android 9; PAR-AL00; HMSCore 5.3.0.312; GMSCore 19.6.29) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.93 HuaweiBrowser/11.1.1.300 Mobile Safari/537.36
ipad平板	Mozilla/5.0 (iPad; CPU OS 9_3_5 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G36 Safari/601.1

我们发现手机或平板的userAgent属性值里都有“Mobile”字符串，通过判断userAgent属性值是否包含“Mobile”就可以确定访问设备是电脑还是手机。

二、JS代码

<script>
    function IsPhone() {
        //获取浏览器navigator对象的userAgent属性（浏览器用于HTTP请求的用户代理头的值）
        var info = navigator.userAgent;
        //通过正则表达式的test方法判断是否包含“Mobile”字符串
        var isPhone = /mobile/i.test(info);
        //如果包含“Mobile”（是手机设备）则返回true
        return isPhone;
    }
</script>