js 获取屏幕各种宽高的方法(浏览器兼容)

获取屏幕各种宽高是JS中常见的需求之一。不同屏幕大小、分辨率、设备类型对于页面要展示的内容影响很大。下面是JS获取屏幕各种宽高的方法及浏览器兼容性的攻略。

获取屏幕分辨率

我们可以使用window.screen.width和window.screen.height获取屏幕分辨率，这两个属性返回的是数值型数据，单位是像素，例如：

console.log(window.screen.width); // 输出屏幕宽度像素数
console.log(window.screen.height); // 输出屏幕高度像素数

兼容性：IE4+、Chrome、Firefox、Safari、Opera。

获取屏幕可用窗口区域的宽高

window.screen对象的availWidth和availHeight属性分别用于获取（应用程序标准）窗口区域的可用宽度和可用高度，使用方式如下：

console.log(window.screen.availWidth); // 输出可用宽度像素数
console.log(window.screen.availHeight); // 输出可用高度像素数

兼容性：IE4+、Chrome、Firefox、Safari、Opera。

获取浏览器窗口宽高

下面的示例代码展示了如何获取浏览器窗口的宽度和高度。

function getWindowSize() {
  var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  return {
    width: w,
    height: h
  };
}

这里我们使用window.innerWidth和window.innerHeight获取浏览器窗口的宽度和高度。如果这两个属性的值为undefined，说明不支持innerWidth和innerHeight，此时我们可以使用document.documentElement.clientWidth和document.documentElement.clientHeight、document.body.clientWidth和document.body.clientHeight，根据浏览器具体情况返回窗口宽度和高度。

兼容性：window.innerWidth和window.innerHeight IE9+、Chrome、Firefox、Safari、Opera；其他方式的兼容性较好。

获取屏幕的物理宽高

下面这个示例展示了如何获取屏幕的物理宽和高。

function getScreenSize() {
  var w = screen.width * window.devicePixelRatio;
  var h = screen.height * window.devicePixelRatio;
  return {
    width: w,
    height: h
  };
}

这里我们通过screen.width和screen.height获取屏幕的物理宽度和高度，然后乘以window.devicePixelRatio得到实际像素宽度和高度，返回值为一个对象，属性值分别为宽度和高度。

兼容性：IE不支持devicePixelRatio，其他浏览器兼容性较好。

综上所述，我们可以使用这些方法适配不同的场景，实现网页宽高动态适配。