HTML body的onresize事件？监听窗口大小改变执行逻辑-html教程-PHP中文网

body.onresize不可用，因规范仅允许window触发resize事件；现代浏览器忽略body上的onresize，正确做法是window.addeventlistener('resize', handler)并加防抖。

html body的onresize事件？监听窗口大小改变执行逻辑

body.onresize 不会触发——这是个常见误解。HTML 规范中标签虽在部分浏览器里“看似”能绑定 onresize，但实际行为不可靠、不标准，且无法响应窗口尺寸变化。

为什么 `body.onresize` 不能用

规范只允许 window 对象原生触发 resize 事件；上的 onresize 属性在 Chrome/Firefox/Safari 中被忽略（即使写上也不执行），IE 早期版本曾有非标支持，但已废弃。实测中它可能“偶然生效”，本质是浏览器把事件冒泡或兜底到了 window，而非 body 自身触发。

直接写或 document.body.onresize = handler，在现代浏览器中等于没写。

正确监听窗口大小变化的写法

必须绑定到 window，且需防抖处理：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

用 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 

<h3>移动端软键盘、横竖屏的特殊处理</h3>
<p>这些场景也会触发 <code>resize</code>，但尺寸读取可能不准：</p>

Android 软键盘弹出时，部分 WebView 中 window.innerWidth 不变，但视口实际被压缩；此时应优先检查 window.visualViewport?.width
横竖屏切换在 iOS Safari 中稳定触发 resize，但 Android 某些版本需要配合 matchMedia('(orientation: landscape)') 主动监听
如果逻辑依赖 DOM 布局结果（比如要读某个元素的 offsetHeight），必须包一层 requestAnimationFrame，否则可能拿到旧尺寸

真正容易被忽略的是：resize 回调执行时机和渲染帧不同步，直接读 DOM 尺寸大概率不准，不加 requestAnimationFrame 就算防抖了也白搭。