全屏切换时resize连带触发是因视口重排导致的规范行为，非bug；推荐仅监听防抖后的resize事件统一处理尺寸响应，必要时用fullscreenchange仅作状态标记。
全屏切换（fullscreenchange）和窗口大小调整（resize）事件在现代浏览器中常被同时触发，尤其在 Chrome、Edge 等 Chromium 内核浏览器中：点击全屏按钮后，不仅会触发 fullscreenchange，还会紧跟着触发多次 resize（因视口尺寸突变）。若两者都绑定了重布局、重计算或 DOM 重绘逻辑，极易造成重复执行、视觉闪烁或性能抖动。
为什么全屏切换时 resize 会“连带触发”？
浏览器在进入/退出全屏时，会动态重置 document.documentElement 或 body 的尺寸，并同步更新 window.innerWidth/Height。这个过程本质是一次视口重排，因此原生触发 resize 事件——它不是 bug，而是规范行为。这意味着你无法靠“只监听 fullscreenchange”来完全替代尺寸响应逻辑。
推荐做法：统一用防抖处理 resize，忽略全屏事件的冗余响应
由于 fullscreenchange 本身不携带尺寸信息，而 resize 总能准确反映最终视口状态，最稳妥的方式是：
-
只监听
resize，不监听fullscreenchange—— 所有尺寸适配逻辑（如响应式栅格重算、Canvas 重设、图表重渲染）全部收口到resize回调中； -
给
resize加防抖（建议 150–250ms） —— 这能自动吞掉全屏切换过程中伴随的多发 resize，只保留最后一次稳定尺寸； -
可选：在防抖回调内加尺寸变更检测，避免无意义重绘（例如前后
window.innerWidth相同则跳过）：
let lastWidth = window.innerWidth;
let lastHeight = window.innerHeight;
const handleResize = debounce(() => {
const w = window.innerWidth;
const h = window.innerHeight;
if (w === lastWidth && h === lastHeight) return;
lastWidth = w;
lastHeight = h;
// ✅ 执行你的布局/重绘逻辑
updateLayout();
}, 200);
window.addEventListener('resize', handleResize);
如果必须监听 fullscreenchange，如何避免与 resize 冲突？
某些场景（如需在全屏进入瞬间显示提示、切换图标、或初始化全屏专属模块）确实需要监听 fullscreenchange。此时应：
立即学习“Java免费学习笔记（深入）”；
-
用节流包裹
fullscreenchange处理函数（如 300ms 节流），防止双击/误触导致重复进入退出时的逻辑错乱； -
在
fullscreenchange中不直接操作尺寸相关逻辑，仅做状态标记（如isFullscreen = document.fullscreenElement !== null）； - 让 resize 防抖函数读取该状态并条件执行 —— 实现“一次响应，双重依据”：
let isFullscreen = document.fullscreenElement !== null;
document.addEventListener('fullscreenchange', () => {
isFullscreen = document.fullscreenElement !== null;
});
const handleResize = debounce(() => {
if (isFullscreen) {
renderForFullscreen();
} else {
renderForNormal();
}
}, 200);
额外提醒：移动端 Safari 的特殊行为
iOS Safari 在横竖屏切换 + 全屏组合操作中，可能触发异常的 resize 序列（如先缩放再拉伸）。建议：
- 防抖延迟设为 ≥250ms（比桌面端稍长）；
- 避免依赖
window.devicePixelRatio变化作为重绘信号（它可能滞后）； - 对关键尺寸计算使用
getBoundingClientRect()或matchMedia辅助校验，而非仅信resize事件。
