最可靠轻量的判断方式是直接用 layui.device().mobile 返回布尔值；它内部缓存 UA 并多条件兜底，避免 UA 伪造、不规范或误判，且不可在 templet 中重复调用 layui.use 或误用变量名。
直接用 layui.device().mobile，它返回布尔值，真就是移动端，假就是桌面端——这是最可靠、最轻量的方式。
为什么不用 UA 字符串手动判断
自己写正则匹配 navigator.userAgent 看有没有 iPhone、Android 这类关键词，看似灵活，实则容易漏判或误判：
- iOS 桌面版 Safari（macOS 14+）UA 里也带
Mobile，但不是手机 - Chrome 开发者工具切“响应式模式”时 UA 可伪造，
device.mobile却仍为false - 某些国产浏览器（如 UC、QQ 浏览器）UA 不规范，正则一写就崩
layui.device() 内部做了 UA 缓存 + 多条件兜底（包括 screen.width、maxTouchPoints 等），调一次就缓存结果，后续再读不重复解析。
templet 函数里怎么安全用
在表格列模板 templet: function(d) { ... } 中判断设备是高频场景，但要注意：
- 必须用
d（当前行数据对象），别写成data或row—— 这俩不存在 - 别在函数里调
layui.use，模块已加载完毕，再调会破坏执行顺序，且无效果 - 后端能传
is_mobile: true字段的话，优先用它——避免前后端设备判断逻辑不一致（比如用户开了桌面版 Chrome 的响应式调试）
示例：
templet: function(d) {
var isMobile = layui.device().mobile;
return isMobile
? '<div class="card-item"><div>' + d.title + '</div></div>'
: '<div class="table-cell">' + d.title + ' | ' + d.author + '</div>';
}
matchMedia 和 device.mobile 哪个更准
两者用途不同，不能简单比“谁更准”：
-
layui.device().mobile判断的是设备类型（手机/平板 vs 桌面），基于硬件能力推断，适合做功能分支（比如弹层全屏、表格切卡片） -
window.matchMedia('(max-width: 768px)')判断的是视口宽度，适合做 CSS 布局切换或 JS 响应式行为（比如分页容器加横向滚动）
典型错误：用 matchMedia 判断“是不是手机”，结果 iPad Pro 宽度 > 768px 就被当成桌面端，但它确实是移动设备。反过来，折叠屏手机展开后宽度也可能超 768px。所以该用哪个，看你要解决的问题本质是“设备能力”还是“屏幕尺寸”。
真正容易被忽略的点是：layui.device() 在首次调用前不会初始化，如果页面极早执行（比如在 layui.config 后、layui.use 前）就访问它，可能返回 undefined。确保它总在 layui.use 回调里或之后使用。
