layUI.open在手机端小屏幕不能显示全页面,也没办法滑动

首先我的项目是点击编辑,打开一个编辑信息页面,在网页端显示效果如下:

有时候工作人员离开电脑,需要手机操作修改,但是弹出的编辑页面显示不全内容,也没办法通过触摸滑动页面看见左面的内容,如下图:

使用开发工具查看html代码,发现了该div样式中有这么一段内容

z-index: 19891015; width: 1000px; height: 600px; position: absolute; top: 172px; left: -316.25px;

其中 left:-316.25px:就是罪魁祸首

那么为什么会有这么一个left值呢,查看layui.js源码发现了原因;

这个left其实是layer.open 默认打开页面居中,自动计算的一个偏移量,用电脑浏览器打开的时候,因为屏幕大,所以显示成居中效果,结果用手机打开的时候,屏幕尺寸小,会得到一个负值,所以左边的内容就向left 负向移动了好多距离。

解决的办法是,在open打开中,先判断下屏幕大小,再主动设定一个offset值:

相关推荐
楠楠子呀29 分钟前
英语、西语、阿语客户各开一个口:多语言获客的分流方案
开发语言·javascript·ecmascript·跨境电商·whatsapp·营销工具
weifont1 小时前
自动化抓取和上架商品:能不动手,就少动手
运维·前端·自动化
米柆1 小时前
HTML5 audio /video 完整事件监听模板
前端·html·html5
半个落月1 小时前
LangGraph.js 实战:从状态图到分支、循环、检查点与人工中断
javascript·人工智能·langchain
IT_陈寒1 小时前
Vite热更新失效?你可能也踩了这个坑
前端·人工智能·后端
程序员大阳2 小时前
副队长CSS教程(30)–CSS Grid 实战:实现复杂自适应表单布局
前端·css·自适应·grid·表单
Csvn2 小时前
微前端实现
前端
Chrischaan3 小时前
做 AI 塔罗小程序时,我为什么不让大模型自己抽牌:一次上线复盘
前端
骑着蜗牛撵大象3273 小时前
LangChain 工具调用从声明到闭环:给智能体接上真实的手脚
前端
数据掘金4 小时前
百度统计后台页面数据异常?从手动调用时机开始排查
前端