layui 无法检测 wifi 或 4g，唯一可行路径是 navigator.connection，但其 type 不精确、effectivetype 仅估算带宽；需先检查 'connection' in navigator，优先用 effectivetype + downlink 判断网络质量，并结合用户偏好与后端综合识别。
layui 本身不提供检测 WiFi 或 4G 流量类型的能力，它没有封装网络类型识别 API，这个需求必须依赖原生浏览器接口。
为什么 navigator.connection 是唯一可行路径
目前唯一被主流浏览器（Chrome、Edge、Firefox Android、Safari 16.4+）支持的网络类型探测方式是 navigator.connection，它返回 NetworkInformation 对象，其中 type 和 effectiveType 字段可间接反映网络质量，但无法精确区分 WiFi 和 4G——比如 type === "cellular" 只表示“蜂窝网络”，可能是 4G、5G 甚至 2G；type === "wifi" 在桌面 Chrome 中常返回 "unknown" 或 "ethernet"，移动端 Safari 则完全不支持 type。
-
navigator.connection.type在 Android Chrome 中可能返回"wifi"、"cellular"、"bluetooth"等，但 iOS Safari 始终为"unknown" -
navigator.connection.effectiveType更可靠些（如"4g"、"3g"、"slow-2g"），但它基于带宽与延迟估算，不是真实接入类型 - Layui 的
layui.device()只返回设备类型（os、ie、mobile），不涉及网络层
在 Layui 项目中安全读取网络信息的写法
不能直接在 layui.use 回调里无条件访问 navigator.connection，需先做存在性与权限检查。以下代码可直接嵌入 Layui 页面 JS：
if ('connection' in navigator) {
const con = navigator.connection;
// 避免 iOS Safari 报错：Cannot read property 'type' of undefined
if (con && typeof con.type === 'string') {
console.log('当前连接类型:', con.type); // 可能是 'wifi', 'cellular', 'unknown'
}
if (con && typeof con.effectiveType === 'string') {
console.log('有效网络类型:', con.effectiveType); // '4g', '3g', '2g', 'slow-2g'
}
} else {
console.warn('当前浏览器不支持 navigator.connection');
}
- 务必用
'connection' in navigator判断，而非typeof navigator.connection !== 'undefined'（IE/旧版 Safari 会报错） - 不要依赖
con.type === 'wifi'做关键逻辑（如自动上传高清图），因为该值在桌面端几乎不可靠 - 若需区分“高带宽”和“低带宽”，优先用
con.effectiveType+con.downlink（单位 Mbps）组合判断
实际业务中更靠谱的替代方案
如果你的真实目标是“WiFi 下自动同步大文件，4G 下只同步小数据”，与其硬判 WiFi/4G，不如结合信号质量 + 用户显式偏好：
- 监听
con.onchange事件，当effectiveType变为"4g"或"3g"时，暂停非紧急上传，并提示用户“检测到移动网络，是否继续？” - 在用户设置页加开关：
layui.form().on('switch(network-mode)', ...)，让用户手动选择“始终使用蜂窝网络”或“仅 WiFi 上传” - 对关键请求加 header，如
X-Network-Hint: wifi，由后端结合 IP 归属地、UA、历史行为综合判断（比前端更准）
真正能稳定区分 WiFi 和蜂窝网络的，只有原生 App 调用系统 API（如 Android 的 ConnectivityManager）。Web 端所有方案都是概率性推断，别把它当成开关按钮来用。
