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值:

相关推荐
没烦恼301几秒前
无痕模式下 HTTP\-First 拦截引发的“页面刷新”误判
前端
文心快码BaiduComate5 分钟前
从个人提效到组织提效:Comate辅助构建自我进化的AI研发系统
前端·程序员
hunterandroid1 小时前
Compose 状态管理:remember、rememberSaveable 与状态提升
前端
星栈1 小时前
Dioxus 接数据库最容易写歪的 3 个地方:sqlx + SQLite 怎么接才顺
前端·rust·前端框架
晴虹1 小时前
vue3-scroll-more:横向滚动条-元素或页签过多滚动显示处理的组件
前端·vue.js
代码搬运媛1 小时前
Claude 全栈开发专用 Rules 配置
前端
PedroQue991 小时前
uni-router v1.7.0重磅更新:守卫重定向自由掌控
前端·uni-app
逸铭1 小时前
Day 4:登录与 Token——桌面端怎么存密钥
前端·客户端
默_笙1 小时前
🍞 我用 CSS 画了一个会转的 3D 立方体,同事以为我学了 Three.js(这节课真的很神奇,我很喜欢)
javascript
溯朢1 小时前
TokUI 流式渲染的 SSE 全链路拆解
前端