需调用 requestFullscreen API 实现原生全屏，配合监听 fullscreenchange 事件并手动调用 table.resize() 重绘表格、隐藏非核心 UI 元素，确保退出后布局正常、固定列对齐、打印无异常。
要在 Layui 后台布局中实现点击按钮切换浏览器原生全屏（即类似 F11 效果），核心是调用浏览器的 requestFullscreen API，并与 Layui 表格、弹层等组件协同处理尺寸重绘和状态恢复。不能靠 CSS 拉伸容器，否则退出后布局错乱、打印异常、固定列失对齐。
一、给页面加一个全屏切换按钮
在顶部工具栏或右上角放一个按钮，比如：
- HTML 写法：
<button class="layui-btn layui-btn-sm" id="toggleFull">全屏</button> - JS 绑定 click 事件，调用封装好的全屏切换函数
- 注意：必须由用户手势触发（如 click），否则 Chrome/Safari 会静默拒绝
二、用原生 API 实现全屏切换（兼容 Layui 2.7 及以下）
如果用的是 Layui 2.7 或更早版本，layui.fullscreen 模块不存在，需手写兼容逻辑：
- 进入全屏：
document.documentElement.requestFullscreen?.() || document.documentElement.webkitRequestFullscreen?.() || document.documentElement.msRequestFullscreen?.() - 退出全屏：
document.exitFullscreen?.() || document.webkitExitFullscreen?.() || document.msExitFullscreen?.() - 调用前建议先判断当前是否已全屏：
document.fullscreenElement
三、监听 fullscreenchange 并重绘关键组件
这是最关键的一步。仅切换全屏状态不会自动刷新 Layui 表格、弹层等尺寸，必须手动干预：
- 全局监听：
document.addEventListener('fullscreenchange', handler) - 进入全屏后：对每个表格调用
table.resize('tableId')，加setTimeout(..., 16)等待 DOM 重排完成 - 退出全屏后：同样要调
table.resize()，否则列宽、高度、固定列滚动条都会残留错误状态 - 若用了
fixed: true列，resize 后补一句table.getScrollWidth('tableId')
四、适配弹层、导航栏等其他区域
后台布局通常含侧边栏、头部、内容区。全屏时建议隐藏非核心 UI：
- 全屏状态下，可动态添加 class（如
body.fullscreen），用 CSS 隐藏.layadmin-side、.layadmin-header - 若用了
layer.open弹窗，全屏后应调layer.full(index)并设shade: false和closeBtn: 0 - 退出全屏时，记得移除 body class，并恢复各模块原始尺寸逻辑
