js怎么获取浏览器窗口大小-js教程-PHP中文网

获取javascript中浏览器窗口大小不包括滚动条，使用window.innerwidth和window.innerheight可直接获取可视区域宽高；1. 标准模式下推荐使用window.innerwidth/height或document.documentelement.clientwidth/height；2. 兼容性处理应结合window.innerwidth、documentelement.clientwidth和body.clientwidth；3. 区分标准与怪异模式可通过document.compatmode判断，css1compat为标准模式，backcompat为怪异模式；4. 移动端虚拟键盘影响窗口高度，需监听resize事件并结合visualviewport api或env()函数处理布局变化，确保输入区域可见且页面表现正常。

js怎么获取浏览器窗口大小

获取JavaScript中浏览器窗口大小，直接点说，用

window.innerWidth

登录后复制

和

window.innerHeight

登录后复制

就能拿到可视区域的宽高，简单粗暴。

解决方案：

要精确地获取浏览器窗口大小，需要考虑不同的浏览器和文档模式。以下是一些常用的方法：

使用
window.innerWidth
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
和
window.innerHeight
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
：这是最直接的方法，返回浏览器窗口的内部宽度和高度，不包括滚动条、边框等。
```
let width = window.innerWidth;
let height = window.innerHeight;

console.log("Width: " + width + ", Height: " + height);
```
登录后复制
使用
```
document.documentElement.clientWidth
```
登录后复制
登录后复制
和
document.documentElement.clientHeight
登录后复制
登录后复制
登录后复制
：在标准模式下，这两个属性返回的是
```
<html>
```
登录后复制
元素（根元素）的可见区域大小，与
window.innerWidth
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
和
window.innerHeight
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
效果相同。
```
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;

console.log("Width: " + width + ", Height: " + height);
```
登录后复制
使用
```
document.body.clientWidth
```
登录后复制
和
document.body.clientHeight
登录后复制
：在怪异模式（quirks mode）下，这两个属性返回的是
```
<body>
```
登录后复制
元素的可见区域大小。但要注意，在标准模式下，它们可能返回0，或者内容撑开的大小。
```
let width = document.body.clientWidth;
let height = document.body.clientHeight;

console.log("Width: " + width + ", Height: " + height);
```
登录后复制

兼容性处理： 为了确保在各种浏览器和文档模式下都能正确获取窗口大小，可以结合以上方法进行兼容性处理。

function getWindowWidth() {
  return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}

function getWindowHeight() {
  return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}

let width = getWindowWidth();
let height = getWindowHeight();

console.log("Width: " + width + ", Height: " + height);

登录后复制

监听窗口大小变化： 使用

window.addEventListener('resize', callback)

登录后复制

可以监听窗口大小的变化，并在变化时执行回调函数。

window.addEventListener('resize', function() {
  let width = getWindowWidth();
  let height = getWindowHeight();
  console.log("Window resized. Width: " + width + ", Height: " + height);
});

登录后复制

需要注意的是，

window.outerWidth

登录后复制

和

window.outerHeight

登录后复制

返回的是整个浏览器窗口的大小，包括边框、工具栏等，通常不用于获取可视区域大小。另外，移动端设备上的虚拟键盘可能会影响窗口高度，需要特别处理。

JavaScript获取到的浏览器窗口大小包括滚动条吗？

一般来说，

window.innerWidth

登录后复制

和

window.innerHeight

登录后复制

返回的是不包括滚动条的浏览器可视区域大小。也就是说，即使页面有滚动条，这两个属性返回的宽高也是不包含滚动条所占据的空间的。但是，如果滚动条是始终可见的（例如，通过CSS设置），那么

window.innerWidth

登录后复制

和

window.innerHeight

登录后复制

的值可能会受到影响，因为它们反映的是实际可用的像素空间。

而

document.documentElement.clientWidth

登录后复制

和

document.documentElement.clientHeight

登录后复制

在标准模式下也同样不包含滚动条。但在怪异模式下，行为可能不一致，具体取决于浏览器的实现。

如果需要精确地知道滚动条的宽度，可以使用以下方法：

function getScrollbarWidth() {
  // 创建一个带有滚动条的 div 元素
  const scrollDiv = document.createElement("div");
  scrollDiv.style.width = "100px";
  scrollDiv.style.height = "100px";
  scrollDiv.style.overflow = "scroll";
  scrollDiv.style.position = "absolute";
  scrollDiv.style.top = "-9999px"; // 移出可视区域
  document.body.appendChild(scrollDiv);

  // 获取滚动条宽度
  const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;

  // 移除 div 元素
  document.body.removeChild(scrollDiv);

  return scrollbarWidth;
}

const scrollbarWidth = getScrollbarWidth();
console.log("Scrollbar width: " + scrollbarWidth);

登录后复制

如何区分浏览器的标准模式和怪异模式？

区分浏览器的标准模式（Standards Mode）和怪异模式（Quirks Mode）主要依赖于文档类型声明（DOCTYPE declaration）。DOCTYPE 声明位于HTML文档的开头，用于告诉浏览器使用哪个HTML或XHTML规范来解析和渲染页面。

标准模式： 当HTML文档包含一个完整的、有效的DOCTYPE声明时，浏览器会以标准模式渲染页面。这意味着浏览器会按照最新的HTML和CSS规范来解析和渲染页面，尽可能地保持一致性和可预测性。

例如：
```
<!DOCTYPE html>
```
登录后复制
或者：
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
登录后复制
怪异模式： 当HTML文档缺少DOCTYPE声明，或者DOCTYPE声明不完整或无效时，浏览器会以怪异模式渲染页面。在怪异模式下，浏览器会模拟旧版本的浏览器的行为，以向后兼容旧的网页。这可能导致页面在不同浏览器之间呈现出不一致的效果。

例如：
```
<html>  
<head>
<title>My Page</title>
</head>
<body>
</body>
</html>
```
登录后复制

可以通过JavaScript来检测当前浏览器处于哪种模式：

function getDocumentMode() {
  if (document.compatMode === 'CSS1Compat') {
    return 'Standards Mode';
  } else if (document.compatMode === 'BackCompat') {
    return 'Quirks Mode';
  } else {
    return 'Unknown Mode';
  }
}

console.log('Document Mode: ' + getDocumentMode());

登录后复制

document.compatMode

登录后复制

属性返回一个字符串，表示浏览器使用的渲染模式。

CSS1Compat

登录后复制

表示标准模式，

BackCompat

登录后复制

表示怪异模式。

在实际开发中，始终建议使用完整的、有效的DOCTYPE声明，以确保浏览器以标准模式渲染页面，从而避免各种兼容性问题。

移动端如何处理虚拟键盘对窗口大小的影响？

移动端虚拟键盘的弹出和隐藏会改变浏览器窗口的可视区域高度，这可能会导致页面布局错乱或元素位置不正确。处理这个问题，需要监听

resize

登录后复制

事件，并采取相应的措施。

监听
resize
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
事件： 当虚拟键盘弹出或隐藏时，会触发
```
window
```
登录后复制
对象的
resize
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
事件。可以监听这个事件来检测窗口大小的变化。
```
window.addEventListener('resize', function() {
  // 在这里处理窗口大小变化
  let windowHeight = window.innerHeight;
  console.log('Window height: ' + windowHeight);
});
```
登录后复制
获取可视区域高度： 在
resize
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
事件处理函数中，获取当前的可视区域高度。可以使用
window.innerHeight
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
或
```
document.documentElement.clientHeight
```
登录后复制
登录后复制
登录后复制
。
判断键盘是否弹出： 比较窗口初始高度和当前高度。如果当前高度明显小于初始高度，则可以认为键盘已经弹出。但是，仅仅比较高度是不够的，因为用户手动调整窗口大小也会触发
resize
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
事件。因此，需要结合其他方法来判断键盘是否弹出。
使用
```
visualViewport
```
登录后复制
登录后复制
登录后复制
API：
```
visualViewport
```
登录后复制
登录后复制
登录后复制
API 提供了更精确的关于可视区域的信息，包括键盘弹出时可视区域的变化。这个API目前兼容性还不是特别好，需要做兼容性处理。
```
if (window.visualViewport) {
  window.visualViewport.addEventListener('resize', function() {
    let viewportHeight = window.visualViewport.height;
    console.log('Visual viewport height: ' + viewportHeight);
  });
}
```
登录后复制
使用 CSS
```
env()
```
登录后复制
登录后复制
登录后复制
函数： CSS
```
env()
```
登录后复制
登录后复制
登录后复制
函数可以访问环境变量，包括
```
safe-area-inset-*
```
登录后复制
变量，这些变量表示安全区域的内边距。通过这些变量，可以计算出键盘弹出时可视区域的变化。但同样存在兼容性问题。
调整页面布局： 当检测到键盘弹出时，可以调整页面布局，例如：
- 固定底部元素的位置，防止被键盘遮挡。
- 滚动页面，使输入框可见。
- 调整元素的高度或宽度，以适应新的可视区域。

延迟处理： 在某些情况下，

resize

登录后复制

事件可能会被频繁触发。可以使用

setTimeout

登录后复制

函数来延迟处理，以避免性能问题。

let resizeTimeout;
window.addEventListener('resize', function() {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(function() {
    // 在这里处理窗口大小变化
    let windowHeight = window.innerHeight;
    console.log('Window height: ' + windowHeight);
  }, 250); // 延迟 250 毫秒
});

登录后复制

meta 标签设置： 有些 meta 标签可以影响移动端浏览器的行为，例如：
- ```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
  登录后复制
  ：这个 meta 标签可以禁止用户缩放页面，从而避免键盘弹出时页面缩放导致的问题。
- ```
<meta name="apple-mobile-web-app-capable" content="yes">
```
  登录后复制
  ：这个 meta 标签可以让网页以应用模式运行，从而隐藏浏览器的地址栏和工具栏，提供更大的可视区域。