Layui layer.open在移动端默认不全屏，需手动通过CSS强制重置.layui-layer和.layui-layer-shade尺寸与定位，并结合anim:-1、fixed:true等配置禁用动画与拖拽，再适配iOS安全区，才能实现真全屏。
layer.open 在移动端默认不全屏，必须手动覆盖样式
layer 默认在移动端会限制宽度、居中显示，不会自动铺满屏幕。想实现真全屏（覆盖状态栏、底部导航栏），不能只靠配置项，得结合 css 强制重置尺寸和定位。
-
area设为['100%', '100%']只控制内容区域，不影响遮罩层和弹窗容器本身 - 遮罩层
.layui-layer-shade和弹窗容器.layui-layer都需要单独处理，否则顶部/底部仍有留白 - iOS Safari 下需额外处理 viewport 缩放和安全区，否则可能被刘海或底部栏裁切
关键 CSS 覆盖必须加 !important 且作用域要够强
Layer 动态插入的 DOM 层级深，普通 class 选择器容易被忽略。直接用属性选择器或带 :not() 的组合更可靠：
body .layui-layer[style*="display: block"] {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
}
.layui-layer-content {
height: 100% !important;
overflow-y: auto !important;
}
.layui-layer-shade {
background-color: rgba(0,0,0,.8) !important;
}
- 用
[style*="display: block"]精准命中当前可见弹窗，避免影响隐藏态 layer -
overflow-y: auto保内容可滚动，否则长内容会被截断 - 不要只改
.layui-layer-page，它只是 content 容器，外层.layui-layer才是定位主体
调用时关闭动画并禁用拖拽，避免移动端卡顿和误操作
移动端 touch 事件与 layer 的 mouse 拖拽逻辑冲突，开启动画也会增加渲染负担：
- 设
anim: -1关闭入场动画（anim: 0是默认淡入，仍会触发重排） - 设
resize: false和move: false，防止手指滑动触发意外位移 - 加
fixed: true确保弹窗随 viewport 固定，不随页面滚动偏移 - 示例调用：
layer.open({ type: 1, content: $('#mobile-fullscreen'), area: ['100%', '100%'], anim: -1, resize: false, move: false, fixed: true, shadeClose: true });
iOS 安全区适配：用 env(safe-area-inset-top) 补顶部留白
iPhone X 及后续机型状态栏下有安全区，纯 top: 0 会导致内容被遮挡。但 layer 不提供原生支持，需手动修正：
- 在弹窗内容内部顶部加一层
padding-top: env(safe-area-inset-top) - 或者用 JS 动态注入：
if ('onorientationchange' in window) { const top = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-top')) || 0; $('.layui-layer-content').css('padding-top', top + 'px'); } - 注意：CSS
env()在 iOS 11.2+ 支持，旧版本需 fallback 到固定值（如20px）
真正难的不是让弹窗“看起来”全屏，而是让它在各种 iOS 版本、Android 厂商定制系统、微信内置浏览器里都稳定撑满——样式覆盖要狠，JS 修补要细，测试不能只看 Chrome 模拟器。
