怎么解决 ie 中获取 window.screen.width 不正确？

Posted 2021-11-07 凯小默

问题

最近在调试一个浏览器分辨率的问题时，发现在 ie 下 window.screen.width 不正确。

我电脑的分辨率设置如下：

然后在 ie 内核浏览器控制台输出 screen，发现下面 width 为 1920，对此我有点懵逼，按理来说应该是 1366 才对：

原因

IE中执行 screen.width 方法，取的只是主显示器的分别率，不论网页实际打开在哪个显示器。

我排查了一下，发现我的主显示器是 1920 x 1080 的。

解决

1.获取浏览器信息

// 判断浏览器类型及版本

export function getBrowserInfo () {
  const agent = navigator.userAgent.toLowerCase()
  const regStrFf = /firefox\\/[\\d.]+/gi
  const regStrChrome = /chrome\\/[\\d.]+/gi
  const regStrSaf = /safari\\/[\\d.]+/gi
  const isIE = agent.indexOf('compatible') > -1 && agent.indexOf('msie' > -1) // 判断是否IE<11浏览器
  const isEdge = agent.indexOf('edge') > -1 && !isIE // 判断是否IE的Edge浏览器
  const isIE11 = agent.indexOf('trident') > -1 && agent.indexOf('rv:11.0') > -1
  if (isIE) {
    const reIE = new RegExp('msie (\\\\d+\\\\.\\\\d+);')
    reIE.test(agent)
    const fIEVersion = parseFloat(RegExp['$1'])
    if (fIEVersion === 7) {
      return 'IE/7'
    } else if (fIEVersion === 8) {
      return 'IE/8'
    } else if (fIEVersion === 9) {
      return 'IE/9'
    } else if (fIEVersion === 10) {
      return 'IE/10'
    }
  }
  if (isEdge) {
    return 'Edge'
  }
  // isIE end
  if (isIE11) {
    return 'IE/11'
  }
  // firefox
  if (agent.indexOf('firefox') > 0) {
    return agent.match(regStrFf)
  }
  // Safari
  if (agent.indexOf('safari') > 0 && agent.indexOf('chrome') < 0) {
    return agent.match(regStrSaf)
  }
  // Chrome
  if (agent.indexOf('chrome') > 0) {
    return agent.match(regStrChrome)
  }
}

2.判断是否是IE

import { getBrowserInfo } from './utils.js';

let width = window.screen.width;
const browserInfo = getBrowserInfo();
// 解决ie中获取window.screen.width不正确
if (browserInfo.indexOf('IE') > -1) {
	width = document.body.clientWidth;
}

console.log(width);