Layui 移动端适配速查表3个设置1处设备判断让页面在手机上正常显示【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layuiLayui 页面在手机上挤成一团通常是视口、响应式栅格、触摸事件三件事没配对。好消息是Layui 3.x 已把移动设备检测内置到核心里大部分适配由组件自己完成你只需要动几行标记。这篇文章按速查表 逐项展开的方式整理每节都能直接照做。先查速查表写代码前核对这4项 适配工作可以压缩成一张清单对照检查即可事项在哪里设置作用视口 metaHTML 的head页面宽度等于设备宽度避免默认缩放栅格类名标记中的.lay-row/.lay-col-*5 个断点自动换行设备判断JS 里调lay.device()决定移动端专属逻辑触摸事件组件内部已处理点按弹层无延迟、不穿帮后两项你几乎不用写代码重点在前两项的标记怎么写。viewport meta 怎么写一行就够了并且不建议把缩放锁死。meta nameviewport contentwidthdevice-width, initial-scale1widthdevice-width让布局视口等于设备宽度initial-scale1避免首屏出现二次缩放。很多人会顺手加maximum-scale1禁止用户放大但这会挡住需要放大阅读的小字号用户属于可访问性问题除非有非常强的排版理由否则不加。至于apple-mobile-web-app-*系列 meta只在页面被添加到主屏幕当 App 用时才有意义普通网页可以忽略。响应式栅格类怎么写xs 到 xl 共5档断点结论手机上排 1 列、平板排 2 列、PC 排 4 列只需要在一格上叠写不同前缀的类名。div classlay-row div classlay-col-xs12 lay-col-sm6 lay-col-md4卡片一/div div classlay-col-xs12 lay-col-sm6 lay-col-md4卡片二/div /div各前缀对应的宽度来自src/css/modules/layout.css里的媒体查询类名前缀生效宽度典型设备lay-col-xs小于 768px手机lay-col-sm大于等于 768px竖屏平板容器固定 720pxlay-col-md大于等于 992px小笔记本lay-col-lg大于等于 1200px桌面显示器lay-col-xl大于等于 1400px大屏 这里有个最容易踩的版本坑本版本的栅格类前缀是lay-如果照着旧教程写成layui-col-xs12样式会静默失效页面看起来像没适配。另外同套媒体查询还提供了lay-hide-xs、lay-show-sm-block这类按断点显隐的工具类适合手机上藏、平板上露的控件。小于 768px 时.lay-container会改为左右 15px 内边距容器边距不用担心。用 lay.device() 判断设备结论不要用正则手写 UA 判断核心层已封装好。const device lay.device(); if (device.mobile) { // Android 或 iOS }device.mobile是android || ios的组合结果另外还能取device.oswindows / linux / ios / mac、device.weixin是否微信内置浏览器甚至传任意参数取版本号lay.device(chrome)。实现就在src/core/lay.js的lay.device函数里。⚠️ 版本差异提醒如果你是从 2.x 迁过来习惯的layui.use(mobile) zepto 的写法在 3.x 源码树里已经没有对应模块了src/components/下查不到 mobile 相关文件触摸相关能力改为内置到各组件中这也是下文两节的内容。触摸事件怎么替代鼠标事件结论你不需要自己写if (isMobile) on(tap) else on(click)这种分支组件内部已经切换好了。以浮动层为例src/components/popup.js里有这样一行导出const clickOrMousedown device.mobile ? touchstart : mousedown;手机上是touchstartPC 上是mousedown业务代码拿到的都是同一个事件名不用关心底层差异。表单也有一处隐式适配src/css/modules/form.css在小于 450px 的屏幕上会自动处理.lay-form-item的标签溢出截断加省略号并把行内控件强制换行成块级登录页那种标签 输入框结构因此不会挤爆。弹层和日期选择器在移动端为什么自动多做一步这两处是移动端最容易出 bug 的地方而 3.x 已经内置了修复了解原理有助于你排查为什么我自定义样式后又不好了。 弹层layer在src/components/layer.js中检测到android|iphone|ipod|ipad|ios的 UA 后会用window.innerWidth / innerHeight覆盖$(window).width()/height()的取值。原因是部分移动浏览器上后两者返回的是旧值直接拿来居中或定位弹层就会偏移、超出屏幕。日期选择器datePickersrc/components/datePicker.js中检测到移动设备后会给时间列表设置overflowY: auto和touchAction: pan-y。pan-y告诉浏览器这块区域可以纵向触摸滑动否则手指划动时列表会卡住日期选不了。这两处都意味着只要你没有覆盖对应样式或事件移动端行为默认是对的反过来自己魔改弹层定位逻辑时先确认有没有绕过 layer 的移动端分支。常见适配问题现象 → 原因 → 解法现象原因解法手机上整页显得很小、要放大才看清缺少widthdevice-width的视口 meta在head加一行 meta见上节栅格类加了但完全不变形用了旧版layui-col-*写法统一替换为lay-col-*iOS 上弹层位置偏移、按钮点不中窗口尺寸 API 返回旧值 / 事件挂在鼠标事件上保留 layer 内置的移动端分支弹层相关交互走组件 API 而非自绑 click排查时建议直接用浏览器开发者工具的设备模拟模式跑一遍三种宽度375pxxs、768pxsm、1024pxmd三档断点都对了移动端适配基本就到位了。上手建议现在就把页面head的视口 meta 补齐再用开发者工具切到 375px 宽度看一遍布局这是投入最小、见效最快的一步。全局搜索一次layui-col-确认没有旧版类名残留有就改成lay-col-然后重点检查登录页这类窄屏表单在 450px 以下的换行表现。【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考