layui弹出层需用函数动态计算area参数适配多端：首次打开时根据窗口宽高返回自适应尺寸，iframe层需调用iframeAuto；resize时仅对已打开层重设样式；移动端须用screen.height兜底并减去UI占用高度。
layui弹出层在不同分辨率屏幕下显示过小或溢出，核心是area参数未随窗口尺寸动态响应——直接写死像素值或百分比都会在缩放、横竖屏切换、高DPI设备上失效。
用函数返回area实现首次打开时自适应
第一步：定义一个动态计算区域的函数，根据当前窗口宽度决定宽高策略：
function getLayerArea() {<br> const w = $(window).width();<br> const h = $(window).height();<br> if (w < 768) return ['95%', Math.max(300, h - 120) + 'px'];<br> if (w < 1200) return ['85%', '70vh'];<br> return ['700px', '500px'];<br>}
第二步：在layer.open中将area设为该函数调用，不是函数体本身——漏掉括号会直接传入undefined导致弹层塌缩。
第三步：必须配合fixed: true，否则小屏滚动后弹层错位；若内容为iframe，还需在success回调中监听load后再调layer.iframeAuto(index)，否则高度仍为初始150px。
窗口缩放时实时重设弹层尺寸
方法一：监听resize并节流重设（推荐）
在layer.open成功返回index后，立即绑定带节流的resize监听：
let resizeTimer;<br>$(window).on('resize', function() {<br> clearTimeout(resizeTimer);<br> resizeTimer = setTimeout(() => {<br> if (layer.getChildFrame(index).length) {<br> // 是iframe层且已加载<br> layer.style(index, {<br> width: $(window).width() * 0.92,<br> height: $(window).height() * 0.8,<br> });<br> layer.iframeAuto(index);<br> } else {<br> // 非iframe层，仅重设宽高<br> layer.style(index, {<br> width: $(window).width() * 0.92,<br> height: $(window).height() * 0.8,<br> });<br> }<br> }, 100);<br>});
注意：不要在全局$(window).resize里无差别调用layer.style，未打开的弹层index不存在会导致报错。
方法二：用layer.config({ resize: true })？无效。该配置只影响拖拽定位重算，【不触发窗口缩放回调】，官方文档未说明此限制，但实测2.x至3.1.1版本均不生效。
移动端特殊处理：避开系统UI遮挡
iOS Safari和微信内嵌WebView中，$(window).height()常返回错误值，直接取100%高度会让弹层顶穿状态栏或盖住底部导航条。
安全做法是用screen.height兜底，并减去固定UI占用：
const safeHeight = Math.min($(window).height(), screen.height) - 100;
然后在getLayerArea函数中，当检测到小屏时返回['100%', safeHeight + 'px']。
这一步不能省——否则iPhone用户点开弹层第一眼就看不到标题栏，误以为页面卡死。
如果弹层含title且skin为'layui-layer-molv'，实际内容区还会被压缩，100px是经验值，需在真机上微调。
