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

相关推荐
cch8918几秒前
易语言VS VUE:编程工具终极对决
前端·javascript·vue.js
ZC跨境爬虫17 分钟前
DES、AES、RSA 加密算法详解(含 JS/Python 实现 + 逆向实战案例)
前端·javascript·python
sunwenjian88622 分钟前
Spring aop 五种通知类型
java·前端·spring
HIT_Weston24 分钟前
36、【Agent】【OpenCode】本地代理(JavaScript 脚本)
开发语言·javascript·ecmascript
LlNingyu29 分钟前
什么是SSRF,它最基本的形式是什么(一)
前端·网络·安全·web安全·xss·csrf
程序员 沐阳33 分钟前
原型链:JavaScript 世界的家族族谱
开发语言·javascript·ecmascript
We་ct1 小时前
LeetCode 136. 只出现一次的数字:线性时间+常量空间最优解拆解
前端·算法·leetcode·typescript·位运算
HAPPY酷1 小时前
3A游戏图形设置终极优化指南:从通用法则到实战应用
java·前端·游戏
达达爱吃肉1 小时前
openclaw 4.2 飞书出图的bug
java·前端·数据库
lightqjx1 小时前
【前端】前端学习二之CSS
前端·css·学习·html