获取浏览器分辨率替代方案 解决iOS/Android返回undefined问题

window.screen.width/height返回undefined的核心原因是：部分iOS Safari隐私模式、定制安卓浏览器、内嵌WebView场景下，对screen对象的属性做了权限限制，或是页面初始化阶段属性还未完成挂载，直接读取就会拿到空值。单一依赖screen接口本身兼容性就不足，需要做多级属性兜底的降级逻辑。

可用的稳定属性优先级 #

按兼容性从高到低、和原接口语义匹配度排序，可依次读取以下属性，取第一个有效值即可：

• 语义匹配原接口的屏幕尺寸属性：优先读window.screen.width/height，异常时降级读window.screen.availWidth/availHeight，不少老版本安卓定制浏览器屏蔽了前者但保留了后者的返回
• 全场景兼容的视口尺寸属性：document.documentElement.clientWidth/clientHeight，这个属性从PC端IE6到所有现代移动端浏览器全兼容，不受隐私模式、系统权限限制，返回值是CSS渲染像素对应的浏览器可视区域宽高，绝大多数业务场景下这个值比物理屏分辨率实用性更高
• 兼容动态缩放场景的属性：window.innerWidth/innerHeight，可以覆盖iOS Safari小窗模式、页面手动缩放后的尺寸读取场景
• 最后兜底：document.body.clientWidth/clientHeight，适配极少数怪异模式渲染的老旧浏览器

可直接复用的封装代码 #

function getStableBrowserSize() {
  // 兜底默认值，按业务常用基准尺寸设置即可
  const DEFAULT_FALLBACK = { width: 375, height: 667 }
  const getFirstValidValue = (valueList) => {
    for (const val of valueList) {
      if (typeof val === 'number' && val > 0) return Math.round(val)
    }
    return null
  }

  const width = getFirstValidValue([
    window.screen?.width,
    window.screen?.availWidth,
    window.innerWidth,
    document.documentElement?.clientWidth,
    document.body?.clientWidth
  ]) ?? DEFAULT_FALLBACK.width

  const height = getFirstValidValue([
    window.screen?.height,
    window.screen?.availHeight,
    window.innerHeight,
    document.documentElement?.clientHeight,
    document.body?.clientHeight
  ]) ?? DEFAULT_FALLBACK.height

  return { width, height, resolutionText: `${width}x${height}` }
}

避坑提示 #

• 不要在<head>标签内同步执行尺寸读取逻辑，此时浏览器还未完成渲染树构建，所有尺寸属性都可能处于未初始化状态，建议在DOMContentLoaded事件触发后再调用方法读取
• 若业务不需要严格获取物理屏幕分辨率，直接使用document.documentElement.clientWidth/clientHeight即可，这个属性在所有已知移动端浏览器场景下都不会返回undefined
• 部分低版本安卓WebView首次读取screen属性可能返回空，若必须拿物理屏尺寸，可以在首次读取失败后延迟100ms重试一次，基本都能拿到正常值

内容的提问来源于stack exchange，提问作者Tech Learn