body.onresize不可用，因规范仅允许window触发resize事件；现代浏览器忽略body上的onresize，正确做法是window.addEventListener('resize', handler)并加防抖。
body.onresize 不会触发——这是个常见误解。HTML 规范中 <body> 标签虽在部分浏览器里“看似”能绑定 onresize，但实际行为不可靠、不标准，且无法响应窗口尺寸变化。
为什么 body.onresize 不能用
规范只允许 window 对象原生触发 resize 事件；<body> 上的 onresize 属性在 Chrome/Firefox/Safari 中被忽略（即使写上也不执行），IE 早期版本曾有非标支持，但已废弃。实测中它可能“偶然生效”，本质是浏览器把事件冒泡或兜底到了 window，而非 body 自身触发。
直接写 <body onresize="doSomething()"> 或 document.body.onresize = handler，在现代浏览器中等于没写。
正确监听窗口大小变化的写法
必须绑定到 window，且需防抖处理：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 用
window.addEventListener('resize', handler)—— 推荐，可多次注册、便于解绑 - 或
window.onresize = handler—— 简单但会覆盖之前赋值，不适合多模块共用 - 首次加载也要手动调用一次
handler()，否则页面初始尺寸不会触发逻辑 - 必须加防抖：拖拽窗口时
resize可能每帧都触发（Chrome 下超 60fps），不防抖会导致重复计算、布局抖动甚至卡死
innerWidth 还是 clientWidth？断点判断别选错
响应式布局做媒体查询断点匹配时，必须用 window.innerWidth：
-
window.innerWidth包含滚动条宽度，和 CSS 中@media (width: 768px)的判定逻辑完全一致 -
document.documentElement.clientWidth排除滚动条，值通常小 17px（滚动条宽度），在 macOS 或启用了“始终显示滚动条”的系统下会出错 - 绝对不要用
document.body.clientWidth：在无 DOCTYPE 或怪异模式下，body高度/宽度可能为 0 或不可信
示例判断移动断点：
function handleResize() {
const w = window.innerWidth;
if (w < 768) {
document.body.classList.add('mobile');
} else {
document.body.classList.remove('mobile');
}
}
移动端软键盘、横竖屏的特殊处理
这些场景也会触发 resize，但尺寸读取可能不准：
- Android 软键盘弹出时，部分 WebView 中
window.innerWidth不变，但视口实际被压缩；此时应优先检查window.visualViewport?.width - 横竖屏切换在 iOS Safari 中稳定触发
resize，但 Android 某些版本需要配合matchMedia('(orientation: landscape)')主动监听 - 如果逻辑依赖 DOM 布局结果（比如要读某个元素的
offsetHeight），必须包一层requestAnimationFrame，否则可能拿到旧尺寸
真正容易被忽略的是：resize 回调执行时机和渲染帧不同步，直接读 DOM 尺寸大概率不准，不加 requestAnimationFrame 就算防抖了也白搭。
