orientationchange 事件不可靠，iOS Safari 已废弃，安卓多数浏览器不触发；应使用 resize 事件结合宽高比判断方向变化。
监听 orientationchange 事件本身不可靠
直接绑定 window.addEventListener('orientationchange', ...) 在多数安卓浏览器和部分 iOS WebView 中根本不会触发——这个事件只在极少数原生 WebView 环境下有效，且 iOS Safari 自 2023 年起已明确废弃该事件。别把它当真，更别写进生产代码。
真正能稳定捕获方向变化的，只有 resize + 尺寸比判断。当窗口宽高比突变（比如从 width > height 变成 width ），基本可判定为方向切换。
- 用
$(window).width() / $(window).height()计算纵横比，阈值设为 1.05（防抖） - 避免每帧都比：加节流，比如 300ms 内只响应一次
- 不要依赖
screen.orientation：PC 浏览器不支持，iOS Safari 返回 null 或只读对象
表格容器重绘必须配合 height 动态计算
table.resize('demo') 对固定 height: 400 完全无效，这点文档没说清但实测如此。横屏后若容器变宽但高度没变，表格 body 会撑开或留白。
正确做法是把 height 改为自适应表达式，并在方向变化后强制重算：
- 初始化时设
height: 'full-120'（减去顶部工具栏等固定高度） - 方向变化后执行：
$('#demo').closest('.layui-table-view').css('height', 'auto');再调table.resize('demo') - 如果用了
fixed: 'left'，必须在done回调里补一句that.setFixedHeight()，否则左右列行高错位
弹层 layer.open 需要重新计算 area 函数
很多人把 area 写成静态数组，比如 area: ['600px', '400px']，横屏后尺寸完全失配。必须确保它是函数：
area: function() {
const w = $(window).width();
const h = $(window).height();
return w <p>注意两点：</p>
- 函数内必须实时取
$(window).width()和$(window).height()，不能缓存 - iOS 微信内嵌浏览器中
$(window).height()偶尔不准，建议兜底：Math.min($(window).height(), screen.height) - 100
卡片布局切换不能只靠 media query
纯 CSS @media (orientation: landscape) 在桌面浏览器中无效，在部分安卓 WebView 中也不触发。Layui 原生 table.render() 更不支持 orientation 切换时自动转卡片——它压根没这个机制。
真实可行路径只有 JS 主导：
- 用
window.matchMedia('(orientation: landscape)')监听（兼容性好于orientationchange） - 监听回调里手动销毁原表格：
table.destroy('demo') - 根据当前 orientation 调用不同模板（
laytpl渲染 table 或 card 结构） - 卡片模式下，所有点击逻辑必须改用事件代理：
$('#card-container').on('click', '.card', handler)，不能再依赖table.on('row(...)')
横竖屏切换不是单纯“重绘”，而是布局形态切换。很多样式、事件绑定、高度计算逻辑都要跟着重走一遍，漏掉任意一环都会导致视觉错位或交互失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
