浏览器兼容策略
现代浏览器对 HTML5 核心特性支持已经很完整，真正要处理的是旧浏览器和部分浏览器"支持程度不同"的边缘 API。核心思想是特性检测：不判断"用户用的什么浏览器"，而是直接问"这个能力存在吗"。
检测写法很简单：if ('geolocation' in navigator) {...}。存在就使用新特性，不存在就降级到替代方案（提示用户、用服务端实现等）。这与"浏览器嗅探"（通过 UA 字符串猜浏览器）相比更可靠——UA 可以伪造，而且永远列不全。
配套理念有两个：优雅降级是"先做全功能版，再为低配环境打补丁"；渐进增强是"先做基础可用版，再对支持新特性的环境叠加增强"。推荐后者——内容永远可达，能力是加分项。查某特性的兼容性认准 caniuse.com，需要补丁时找对应的 polyfill（用旧语法模拟新 API 的垫片库）。
本节要点用特性检测（in 操作符）代替浏览器嗅探；推荐渐进增强：基础功能人人可用，新特性锦上添花；兼容性查 caniuse，缺口用 polyfill 补。
HTML
<script> // 特性检测：直接问"能力存在吗"，而不是猜浏览器 if ('geolocation' in navigator) { // 支持：使用定位 navigator.geolocation.getCurrentPosition(function (pos) { console.log(pos.coords.latitude, pos.coords.longitude); }); } else { // 不支持：提供降级方案 console.log('请手动填写所在城市'); } // 检测 localStorage 是否可用（某些隐私模式下被禁用） function storageOk() { try { localStorage.setItem('__t', '1'); localStorage.removeItem('__t'); return true; } catch (e) { return false; } } </script>
📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读