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

相关推荐
weixin_39544891几秒前
main.c_0222cursor
c语言·前端·算法
无尽的沉默20 分钟前
Thymeleaf 表达式
java·开发语言·前端
无尽的沉默22 分钟前
Spring Boot 整合 Thymeleaf 模板引擎
java·前端·spring boot
We་ct28 分钟前
从输入URL到页面显示的完整技术流程
前端·edge·edge浏览器
先做个垃圾出来………1 小时前
DeepDiff差异语义化特性
服务器·前端
蓝帆傲亦1 小时前
前端常用可视化图表组件大全
前端
颜酱2 小时前
前缀和技巧全解析:从基础到进阶
javascript·后端·算法
CappuccinoRose2 小时前
HTML语法学习文档(九)
前端·学习·架构·html5
NEXT062 小时前
BFC布局
前端·css·面试
菜鸟小芯2 小时前
【GLM-5 陪练式前端新手入门】第四篇:卡片布局 —— 让个人主页内容更有层次
前端·人工智能