layui表单移动端适配核心是三件事：用栅格系统（如layui-col-sm12）实现上下堆叠布局；增大点击区域（padding:12px 16px、checkbox尺寸调至20px）并屏蔽ios干扰；按需调用form.render(null,'filter')且防抖，避免全局重刷。
表单默认左右布局在手机上挤成一团
layui 表单的 layui-form-label 和 layui-input-block 默认是横向并排，小屏下 label 文字被截断、输入框缩成窄条、按钮错位——这不是 bug，是它压根没为移动端设计「上下堆叠」模式。
最直接有效的解法是用栅格系统强制换行：layui-col-sm12 让 label 和 input 各占一整行；layui-col-md6 在中屏恢复左右并排。不需要写额外 CSS，也不依赖 JS 重排。
- label 必须包在
layui-col-*里，不能只给 input 加栅格类 - 避免嵌套多层
layui-form-item，每项独立用栅格包裹更可控 - 提交按钮建议单独一行，加
layui-col-sm12 layui-col-md6 layui-col-offset-md3居中防误触
触摸操作热区太小、点击无响应
手机端点击 layui-input 或 checkbox 时经常失焦或没反应，主因是默认样式 padding 太小（仅 6px）、字体 14px 偏小，且没处理 iOS 的 300ms 延迟。
必须覆盖两处：.layui-form input, .layui-form select, .layui-form textarea 统一设 padding: 12px 16px；.layui-form-checkbox i 改为 width: 20px; height: 20px；再加一行 document.body.style.webkitTouchCallout = 'none' 防长按弹窗干扰。
- 别只改
.layui-input，radio/checkbox 的i元素才是实际点击区域 - 禁用
user-select: none（layui 默认有），否则 iOS 上文字无法复制调试 - 如果用了
laydate，记得给它的弹层加-webkit-overflow-scrolling: touch，否则滚动卡顿
form.render() 在移动端失效或重复渲染
调用 form.render() 后，select 下拉箭头消失、开关组件不响应——常见于页面动态插入表单 DOM 后未指定 filter，或在 resize 回调里无防抖反复执行。
关键原则：只渲染必要部分。动态生成的表单，用 form.render(null, 'your-filter') 指定 lay-filter；监听 window.onresize 时务必加 200ms 防抖，否则安卓 WebView 会卡死。
- 不要在
table.on('row(xxx)')回调里调form.render()，容易触发重入 - 移动端表单若含
lay-verify="required"，验证提示框默认位置偏右，需补 CSS：.layui-layer-content { word-break: break-word; max-width: 80vw; } -
form.on('submit(xxx)')的 event.preventDefault() 必须保留，否则 iOS 会跳转空白页
日期、上传等组件在手机上显示异常
laydate 在 iOS 上弹出后遮挡输入框、upload 点击无反应——不是组件问题，而是它们默认依赖 PC 端 hover 和 click 事件，在触摸设备上缺少 fallback。
解决方案分两层：一是加 lay-keyboard="false" 关闭 laydate 的键盘输入（移动端根本用不到）；二是 upload 组件必须绑定 accept="image/*" 并设 multiple，否则 iOS Safari 拒绝调起相册。
- laydate 的
trigger不要设为'click'，保持默认空值，让它自动适配 touchstart - upload 的
choose回调里，别直接操作input[type=file]的 value，iOS 安全策略会清空它 - 所有弹层（layer、laydate、tips）都要加
anim: 0，避免移动端动画掉帧导致白屏
真实适配没那么多玄学。核心就三件事：用栅格代替默认流式布局、放大点击区域并屏蔽干扰事件、按需渲染而非全局重刷。剩下都是细节补漏，比如 viewport 声明漏了、iOS 键盘顶起页面没监听 resize，这些比框架本身更常导致失败。
