api 获取窗口大小

API 获取窗口大小的详细指南

浏览器端（JavaScript）

核心方法

方法	返回值	说明
window.innerWidth	数值（px）	浏览器窗口内容区域宽度（含滚动条）
window.innerHeight	数值（px）	浏览器窗口内容区域高度（含滚动条）
document.documentElement.clientWidth	数值（px）	视口宽度（不含滚动条）
document.documentElement.clientHeight	数值（px）	视口高度（不含滚动条）

完整示例代码

// 获取窗口宽高（含滚动条）
const width = window.innerWidth;
const height = window.innerHeight;
// 获取视口宽高（不含滚动条）
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
// 监听窗口大小变化
window.addEventListener('resize', () => {
  console.log('窗口大小改变：', window.innerWidth, window.innerHeight);
});

注意事项

• 兼容性：window.innerXXX 在 IE8+ 支持，早期版本需用 document.documentElement
• 单位差异：返回值为 CSS 像素，高 DPI 屏幕需乘以 window.devicePixelRatio
• 移动端适配：需结合 orientation 事件处理横竖屏切换

---

Electron 应用

主进程 vs 渲染进程

场景	主进程方法	渲染进程方法
获取窗口尺寸	BrowserWindow.getSize()	window.getSize()
监听尺寸变化	BrowserWindow.on('resize')	window.on('resize')

示例代码

// 主进程获取窗口尺寸
const { BrowserWindow } = require('electron');
let win = new BrowserWindow();
console.log(win.getSize()); // [宽, 高] 数组
// 渲染进程监听尺寸变化
window.on('resize', () => {
  const [width, height] = window.getSize();
  console.log(`窗口尺寸：${width}x${height}`);
});

---

桌面应用（原生 API）

Windows API

// C# 示例（WinForms）
int width = Screen.PrimaryScreen.Bounds.Width;
int height = Screen.PrimaryScreen.Bounds.Height;

Android 开发

// Kotlin 示例
val width = Resources.displayMetrics.widthPixels
val height = Resources.displayMetrics.heightPixels

iOS 开发

// Swift 示例
let width = UIScreen.main.bounds.size.width
let height = UIScreen.main.bounds.size.height

---

常见问题与解答

问题1：如何判断窗口是否处于全屏状态？

解答：

• 浏览器：检查 window.fullScreen 或 document.fullscreenElement
• Electron：使用 BrowserWindow.isFullScreen()
• 原生应用：各平台有专用 API（如 Windows 的 IsFullScreen）

问题2：如何处理窗口缩放时的布局适配？

解答：

1. 监听尺寸变化：通过 resize 事件实时获取新尺寸
2. 响应式设计：使用相对单位（%）或媒体查询
3. DPI 适配：将 CSS 像素转换为物理像素：实际像素 = CSS像素 * window.devicePixelRatio
4. 虚拟视口：设置 <meta name="viewport"> 控制移动端布局

---

通过以上方法,开发者可根据不同运行环境选择合适的 API 获取窗口

以上就是关于“api 获取窗口大小”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!