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

news/2024/6/17 18:30:10 标签: layui, 前端, javascript

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

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

使用开发工具查看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值:


http://www.niftyadmin.cn/n/5036325.html

相关文章

网络编程 day2

TCPser TCPcli UDPser UDPcli

《Kubernetes部署篇:Ubuntu20.04基于外部etcd+部署kubernetes1.25.14集群(多主多从)》

一、部署架构图 1、架构图如下所示: 2、部署流程图如下所示: 二、环境信息 1、资源下载基于外部etcd+部署容器版kubernetes1.25.14集群资源合集 2、部署规划主机名K8S版本系统版本内核版本IP地址备注k8s-master-121.25.14Ubuntu 20.04.5 LTS5.15.0-69-generic192.168.1.12ma…

视频相关 压缩 编码 存储 查询 知识点

视频相关 压缩 编码 存储 查询 知识点 视频压缩:I帧、P帧、B帧 H264是新一代的编码标准,以高压缩高质量和支持多种网络的流媒体传输著称,在编码方面,我理解的他的理论依据是:参照一段时间内图像的统计结果表明&#…

PostgreSQL 16数据库的yum、编译、docker三种方式安装——筑梦之路

一、 docker方式 docker pull postgres:16.0docker rm -f lhrpg16docker run --name lhrpg16 -h lhrpg16 -d -p 54329:5432 -e POSTGRES_PASSWORDlhr -e TZAsia/Shanghai postgres:16.0docker exec -it lhrpg16 bashdocker exec -it lhrpg16 psql -U postgres -d postgressele…

基于java SpringBoot和HTML实验室预约管理系统设计

摘要 实验室信息管理系统是利用计算机网络技术、数据存储技术、快速数据处理技术对实验室进行全方位管理的计算机软件系统。实验室信息管理系统从最初仅完成数据存储和有限的网络功能,发展到现在可以处理海量数据,具备完善的管理职能,并且能够…

QMutableListIterator详解

目录 是什么: 1. 从列表中删除特定元素 2. 替换特定元素 是什么: Qt中,QMutableListIterator 是一个用于迭代和修改 QList(动态数组) 的类。QMutableListIterator 继承自 QListIterator,并添加了修改和删…

为实验室运维提供安全、智能、节能整体解决方案的易云维®实验室智能化管理平台

实验室安全问题频繁发生,在对生命损失表示遗憾的同时,再次提醒科研人员,实验室安全不容忽视。为了保证实验室工作环境的安全,易云维自主研发了实验室智能化管理平台,其中安防管理功能对确保实验室安全具有重大意义。 实…

用PHP异步协程控制python爬虫脚本,实现多协程分布式爬取

背景 公司需要爬取指定网站的产品数据。但是个人对python的多进程和协程不是特别熟悉。所以,想通过php异步协程,发起爬取url请求控制python爬虫脚本,达到分布式爬取的效果。 准备 1.准备一个mongodb数据库用于存放爬取数据2.引入flask包&a…