html5检测手机网络

HTML5检测手机网络状态的方法

基础网络状态检测

HTML5提供了navigator.onLine属性,用于判断设备是否处于在线状态：

if (navigator.onLine) {
  console.log("设备在线");
} else {
  console.log("设备离线");
}

Network Information API（网络信息API）

现代浏览器支持navigator.connection对象,可获取更详细的网络信息：

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
  console.log("有效带宽:", connection.downlinkMax, "Mbps"); // 最大下行带宽
  console.log("网络类型:", connection.effectiveType); // wifi/4g/3g等
  console.log("网络变化时间:", connection.updateTime); // 上次更新时间戳
}

网络状态变化监听

通过window对象的online和offline事件监听网络状态变化：

window.addEventListener('online', () => {
  console.log('网络已连接');
});
window.addEventListener('offline', () => {
  console.log('网络已断开');
});

关键API对比表

常见问题与解答

Q1：如何区分WiFi和移动数据网络？
A1：HTML5标准未直接提供区分方式，但可通过以下方案实现：

1. 使用navigator.connection.effectiveType（如返回wifi/4g）
2. 结合用户代理（User-Agent）字符串分析（不可靠）
3. 调用原生API（如Cordova插件）

   // 示例：检测是否为WiFi
   const isWiFi = connection && connection.effectiveType === 'wifi';

Q2：如何兼容不支持Network Information API的浏览器？
A2：采用渐进增强策略：

1. 优先使用navigator.onLine进行基础判断
2. 检测navigator.connection是否存在，存在则补充详细信息
3. 对不支持的浏览器降级处理

   function checkNetwork() {
   if (!navigator.onLine) {
    return '离线状态';
   }
   const conn = navigator.connection;
   return conn ? `在线（${conn.effectiveType}）` : '在线（未知类型）';