语言►JavaScript►navigator

如何使用JavaScript判断设备的网络类型

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/29/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8JavaScript%E5%88%A4%E6%96%AD%E8%AE%BE%E5%A4%87%E7%9A%84%E7%BD%91%E7%BB%9C%E7%B1%BB%E5%9E%8B/

摘要

本文主要讲述了：

  1. 原理
  2. 兼容性测试

正文

原理

网络连接的类型

取值范围：

  • wifi WIFI
  • cellular 蜂窝数据

网络连接的有效类型

取值范围：

  • 2g
  • 3g
  • 4g

兼容性测试

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      window.addEventListener('load', function () {
        const foo = document.createElement('div');
        foo.textContent = navigator.userAgent;
        document.body.appendChild(foo);
        document.body.appendChild(document.createElement('hr'));
      });
    </script>
    <script>
      window.addEventListener('load', function () {
        document.body.append('connection' in navigator);
        document.body.append('\n');
        document.body.append('type' in navigator.connection);
        document.body.append('\n');
        document.body.append('effectiveType' in navigator.connection);
        document.body.append('\n');
        document.body.append('onchange' in navigator.connection);
      });
    </script>
  </body>
</html>
System Browser Name Browser Version navigator.connection navigator.connection.type navigator.connection.effectiveType navigator.connection.onchange
Android Firefox 68.0 true true false false
Android EdgA 44.11.2.4122 true true true true
Android MiuiBrowser 11.0.10 true true true true
Android 华为浏览器 10.7.2.4045 false false false false
Android MQQBrowser 10.1.1.6432 true true true true
Android 360 浏览器 9.0.0.138 true true true true
Android UCBrowser 12.9.0.1070 true true false true
iOS Safari 12.1.2 false false false false

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/29/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8JavaScript%E5%88%A4%E6%96%AD%E8%AE%BE%E5%A4%87%E7%9A%84%E7%BD%91%E7%BB%9C%E7%B1%BB%E5%9E%8B/

本文对你有帮助？请支持我

支付宝
微信