一段代码识别当前浏览器是pc端、手机端还是平板

最新推荐文章于 2024-06-06 17:26:57 发布

阿福冲冲冲

最新推荐文章于 2024-06-06 17:26:57 发布

阅读量850

点赞数

分类专栏：狂揽细捡文章标签：前端

本文链接：https://blog.csdn.net/gongsixing1998/article/details/126134543

版权

狂揽细捡专栏收录该内容

1 篇文章 0 订阅

订阅专栏

navigator.userAgent : 浏览器用于 HTTP 请求的用户代理头的值，通过UserAgent可以取得浏览器类别、版本，客户端操作系统等信息。

在PC端打开，navigator.userAgent 显示如下
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
在手机web端打开，navigator.userAgent 显示如下
Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>dianw</div>
  <script>
    var os = function () {
      console.log('12')
      var ua = navigator.userAgent,
        isWindowsPhone = /(?:Windows Phone)/.test(ua),
        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
        isAndroid = /(?:Android)/.test(ua),
        isFireFox = /(?:Firefox)/.test(ua),
        isChrome = /(?:Chrome|CriOS)/.test(ua),
        isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
        isPhone = /(?:iPhone)/.test(ua) && !isTablet,
        isPc = !isPhone && !isAndroid && !isSymbian;
      return {
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc
      };
    }();

    if (os.isAndroid || os.isPhone) {
      alert("手机");
    } else if (os.isTablet) {
      alert("平板");
    } else if (os.isPc) {
      alert("电脑");
    }


    
  </script>
</body>

</html>