layui轮播图手机端异常的主因是height写死且未动态适配——需用img.onload获取首图真实高度并赋给.layui-carousel，加!important覆盖；图片设width:100%;height:auto；禁用updown动画；监听resize防抖重算高度。
Layui 轮播图在手机端宽度异常、高度塌陷、切换卡顿，不是插件问题，而是默认没启用响应式逻辑——width: '100%' 仅控制容器宽度，不保证图片等比缩放，height 写死像素值会直接破坏移动端视口适配。
轮播容器 height 必须动态计算，不能写死
写死 height: '400px' 是手机端轮播“被压扁”或“留大片空白”的主因。Layui 不会自动按图片原始比例撑开容器，必须手动读取首张图真实高度并赋给外层 .layui-carousel。
- 用
$('#banner img').eq(0).height()获取首图渲染后高度（注意：必须等图片加载完成，window.onload或img.onload回调里执行） - 别用
offsetHeight或getBoundingClientRect().height，未加载完时返回 0 - 设置后记得加
!important覆盖 layui 默认内联 style，例如：$('.layui-carousel').css('height', h + 'px !important') - 若首图加载慢，可先设一个最小高度兜底：
min-height: 200px（CSS 层面）
移动端需禁用 anim: 'updown' 和 indicator: 'none'
anim: 'updown' 在小屏触控下易触发误滚动，indicator: 'none' 会让用户失去当前页码感知，尤其当轮播项超过 3 张时。
- 优先用默认
anim: 'default'（左右滑动），它对 touchmove 的拦截更稳定 - 保留
indicator: 'inside'或'outside'，避免用户无法判断是否在轮播中 - 若真要上下动效，务必加
arrow: 'hover'并限制只在 hover 设备生效；手机端保持arrow: 'always'防止找不到操作入口
图片必须用 width: 100%; height: auto; 保证等比缩放
即使容器宽度自适应，如果 <img> 没设样式，iOS Safari 和部分安卓 WebView 仍会按原始尺寸渲染，导致横向溢出或拉伸变形。
- 全局加 CSS：
.layui-carousel img { width: 100%; height: auto; display: block; } - 禁止给
img设固定height或max-height，那会强制裁剪 - 若轮播内容是背景图（非
<img>），改用background-size: cover+background-position: center
resize 时要重新计算高度，否则横竖屏切换失效
手机旋转屏幕后，图片宽度变了，但之前算的 height 没更新，轮播区域就错位。Layui carousel 模块本身不监听 resize 事件。
- 用
window.addEventListener('resize', debounce(fn, 200))做防抖重算（别用onresize，频繁触发卡顿） - 重算逻辑和初始化一致：取首图
clientHeight→ 设置.layui-carousel高度 - 注意：Safari 横屏时
window.innerWidth可能不准，优先用document.documentElement.clientWidth
最常被忽略的是图片加载时机和 resize 后的高度重置——这两点一漏，轮播在真机上十有八九显示异常，哪怕代码看着完全正确。
