尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
Layui 移动端适配速查表:3个设置+1处设备判断,让页面在手机上正常显示
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),仅供参考
RELATED

相关推荐

GitHub汉化插件新手完整教程:5分钟装好刷新,界面全变中文

GitHub汉化插件新手完整教程:5分钟装好刷新,界面全变中文

GitHub汉化插件新手完整教程:5分钟装好刷新,界面全变中文 【免费下载链接】github-chinese GitHub 汉化插件,GitHub 中文化界面。 (GitHub Translation To Chinese) 项目地址: https://gitcode.com/gh_mirrors/gi/github-chinese 第一…

📅 2026/9/15 8:13:15
094-刻意练习2

094-刻意练习2

刻意练习系列第094篇:刻意练习2.0 虚拟现实和增强现实时代的训练革命 引言 在过去三十年中,Anders Ericsson提出的"刻意练习"理论深刻地改变了人类对技能习得的理解。1万小时法则、舒适区突破、心理表征、即时反馈——这些概念已经成为全球精英培训的共同语言。…

📅 2026/10/12 18:04:05
免费版与付费版差在哪:给量化软件权益页保存日期和变更记录

免费版与付费版差在哪:给量化软件权益页保存日期和变更记录

量化软件今天开放的免费功能,下个月可能调整;付费权益也可能因版本、账户或数据服务变化而不同。牛股王股票、聚宽和QMT分处规则化工具、网页研究平台和券商终端三个工作区,不能只用一个“免费/付费”标签概括。个人用户更需要保存官方页面的…

📅 2026/9/15 17:28:00
MORE NEWS

更多资讯

📰

宁夏高压电工作业考试官方回应:证书过期了不知道怎么复审延期?别慌!

宁夏高压电工作业考试官方回应:证书过期了不知道怎么复审延期?别慌! 证书过期了不知道怎么复审延期,是不是你正在经历的难题?别急,官方回应来了,咱们一起来理清楚【宁夏高压电工作业考试】的最新流程和注意事项,避免你走弯路。…

📰

特种设备焊接高级工值不值得考?这5个细节让你少走弯路

特种设备焊接高级工值不值得考?这5个细节让你少走弯路 怕考不过白交培训费?特种设备焊接高级工证值不值得考,这是很多鹤壁中小施工企业负责人、焊工师傅最关心的问题。说实话,这个证能不能拿到,直接影响你能不能接大项目、能不能拿到高工资,甚至决定你…

📰

大亚湾电工证复审机构怎么选?含金量高的证书你必须知道

大亚湾电工证复审机构怎么选?含金量高的证书你必须知道 找工作难,但有证就容易多了,特别是像电工这样的特种作业证,没证根本进不了门。很多工友都在问,大亚湾电工证复审机构靠谱吗?含金量高不高?今天就来聊聊这些实实在在的问题,帮你少走弯路。…

📰

大亚湾电工证复审机构多少钱 电工证复审怕挂科怎么破

大亚湾电工证复审机构多少钱 电工证复审怕挂科怎么破 实操考试心里没底怕挂科,这几乎是每个准备参加电工证复审的学员的真实写照。尤其是像大亚湾这样的工业聚集区,电工岗位需求量大,但证书复审过程中的实操考核却让人头疼不已。你不是怕考不过,而是怕在…

📰

三亚电工证报考条件怎么过?真实经历告诉你怎么报

三亚电工证报考条件怎么过?真实经历告诉你怎么报 我以前就担心自己学历不高,根本报不上名,结果一打听,原来很多和我一样的人都是靠经验一步步走出来的。今天就从一个南阳卧龙区学员的真实经历说起,告诉你三亚电工证报考条件到底怎么过,别再被那些“学历…

📰

低压电工证有啥政策多久拿证?报名别乱选怕被坑

低压电工证有啥政策多久拿证?报名别乱选怕被坑 你是不是也这样,听说低压电工证能上岗,但不知道去哪报名,怕被中介骗钱?别急,这篇文章从你最关心的【低压电工证有啥政策】说起,告诉你多久能拿证、怎么报名、政策有没有变化,还有鹤壁项目现场管理员的真…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬