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

23,305 阅读1分钟

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

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>