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

相关推荐
持敬chijing14 分钟前
Web渗透之前后端漏洞-文件包含漏洞
前端·安全·web安全·网络安全·网络攻击模型·安全威胁分析
CV艺术家20 分钟前
前端免费高效的接入天气组件(天气网),控制组件的样式
前端
如果超人不会飞33 分钟前
WebMCP:当浏览器学会和 AI「说人话」,你的网页就成了智能体的游乐场
javascript
hunterandroid33 分钟前
RecyclerView 进阶:DiffUtil 与列表更新
前端
_codeOH34 分钟前
Vue 3 vs React 19:框架还在卷,核心原理就这些
前端·vue.js
the_answer36 分钟前
CSS 新时代:浏览器原生能力如何重塑前端开发范式
前端
不会写DN37 分钟前
固定背景图不随页面滚动的完美方案
前端
整点可乐41 分钟前
cesium实现全景图加载
javascript·cesium
天蓝色的鱼鱼42 分钟前
Vite 8 换上 Rolldown 后,前端构建真的会快很多吗?
前端·vite
梦曦i1 小时前
全面解析uni-router v1.2.0功能
前端·uni-app