JavaScript 判断浏览器是PC端还是移动端-蒲公英云

JavaScript 判断浏览器是PC端还是移动端

墨蓝 2023-06-02 10:38 120阅读 0赞

JavaScript 判断浏览器是PC端还是移动端

- JavaScript Browser 对象
- 两种方法
- - .test( navigator.userAgent )
  - navigator.userAgent.match()
- 实例

JavaScript Browser 对象

Navigator 对象
Navigator userAgent 属性
语法：navigator.userAgent

两种方法

.test( navigator.userAgent )

/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

navigator.userAgent.match()

navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
            );

Navigator 对象包含有关浏览器的信息

userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值

可以通过获取Navigator userAgent属性的属性值，再和相关的移动端类型进行匹配，来判断浏览器的类型，通过调整 match 方法的参数，也可以判断不同的浏览器类型

实例

<script>
        if (isMobile()) { 
            console.log("mobile");
        } else { 
            console.log("pc");
        }
        function isMobile() { 
            let flag = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            return flag;
        }
    </script>
<script>
        if (isMobile()) { 
            console.log("mobile");
        } else { 
            console.log("pc");
        }
        function isMobile() { 
            let flag = navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
            );
            return flag;
        }
    </script>