什么是Web API在javascript中的应用_怎样获取地理位置和设备信息【教程】_技术教程

Web API 是浏览器原生接口，如 navigator.geolocation，非第三方库；获取位置必须用 getCurrentPosition，仅限 HTTPS/localhost，需用户主动触发，返回坐标或错误码；设备信息中 userAgent 等字段不可靠，hardwareConcurrency 和 devicePixelRatio 更可信；权限逐次授权，需处理拒绝场景。

Web API 是浏览器提供的原生能力，不是第三方库

Web API 指的是浏览器环境自带的一组接口，比如 navigator.geolocation、navigator.userAgent、screen.width 这些，它们不需要引入任何外部脚本就能直接调用。很多人误以为 Web API 是像 axios 那样的工具，其实它和 DOM 操作（document.getElementById）属于同一类——是浏览器给 JS 的“内置权限”。能否用、怎么用，取决于当前上下文（比如是否在 HTTPS 页面、用户是否授权、设备是否支持）。

获取地理位置必须走 `navigator.geolocation.getCurrentPosition`

这是唯一标准方式，且有强约束：

只在 HTTPS 或 localhost 下可用；HTTP 页面会静默失败或抛出 SecurityError
必须由用户主动触发（比如点击按钮），不能在页面加载时自动调用，否则 Chrome 会拒绝请求
回调函数第一个参数是 Position 对象，其中 coords.latitude 和 coords.longitude 是核心字段
错误回调里常见 code: 1（用户拒绝）、code: 2（位置服务不可用）、code: 3（超时）

简单示例：

button.addEventListener('click', () => {
  navigator.geolocation.getCurrentPosition(
    (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
    (err) => console.error('定位失败:', err.code)
  );
});

读取设备信息要区分「可读」和「不可靠」字段

很多字段表面能读，实际用途有限：

navigator.userAgent 可读但已被广泛伪造，不能用于判断真实设备类型
screen.width 和 screen.height 是屏幕物理像素，但对响应式布局意义不大；更推荐用 window.innerWidth + matchMedia
navigator.platform 和 navigator.vendor 在现代浏览器中基本失效，Chrome 已统一返回 "Win32" 或 "Linux x86_64"
真正可靠的是 navigator.hardwareConcurrency（逻辑 CPU 核心数）和 devicePixelRatio（像素比），可用于性能适配