html5判断手机网络

HTML5判断手机网络的方法

使用Network Information API

HTML5的Network Information API提供了获取设备网络连接状态的能力，包括网络类型（如WiFi、4G、3G等）和有效带宽估计，该API通过navigator.connection属性访问。

关键属性与方法：

• navigator.connection.effectiveType：返回当前网络类型（如'4g'、'wifi'）。
• navigator.connection.downlink：返回当前网络的下行带宽（单位：Mbps）。
• navigator.connection.downlinkMax：返回最大下行带宽（单位：Mbps）。
• navigator.connection.onchange：监听网络状态变化的事件。

示例代码：

if ('connection' in navigator) {
  const connection = navigator.connection;
  console.log('当前网络类型：', connection.effectiveType); // 输出：4g/wifi等
  console.log('下行带宽：', connection.downlink, 'Mbps');
  connection.onchange = () => {
    console.log('网络状态已变更：', connection.effectiveType);
  };
} else {
  console.log('当前浏览器不支持Network Information API');
}

浏览器兼容性

注意：部分浏览器可能需要手动开启实验性功能或存在版本限制。

回退方案（兼容低版本浏览器）

对于不支持Network Information API的浏览器，可以通过以下方式判断网络状态：

• navigator.onLine：检测设备是否在线（返回true或false）。
• 用户代理（User Agent）分析：通过navigator.userAgent判断设备类型，但无法直接获取网络类型。

示例代码：

if (!('connection' in navigator)) {
  // 回退方案：检测是否在线
  if (navigator.onLine) {
    console.log('设备在线，但无法获取具体网络类型');
  } else {
    console.log('设备离线');
  }
}

相关问题与解答

问题1：如何判断当前网络是WiFi还是移动数据？

解答：
使用navigator.connection.effectiveType属性，其值可能为'wifi'、'4g'、'3g'等。

if (navigator.connection.effectiveType === 'wifi') {
  console.log('当前连接为WiFi');
} else {
  console.log('当前连接为移动网络');
}

问题2：如何监听网络状态变化（如从WiFi切换到4G）？

解答：
通过监听navigator.connection.onchange事件，并在回调函数中处理状态变化：

navigator.connection.onchange = () => {
  if (navigator.connection.effectiveType === '4g') {
    console.log('已切换到4G网络');
  }