必须在中添加viewport禁用缩放，并在layer.open的success回调中对layero设置touch-action: none；iframe层还需向其contentDocument注入相同viewport，且需同源才能生效。
在移动端使用 Layui layer 弹窗时，用户双指 pinch 手势会意外缩放整个页面（尤其是 iOS Safari 和部分 Android 浏览器），导致弹窗内容变形、文字模糊、布局错乱，而 layer 本身不拦截该行为。
禁止移动端全局页面缩放
在 中添加 viewport meta 标签，禁用用户缩放能力：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这一步是基础前提，【必须放在所有 layer 调用之前】。若未设置，后续任何 layer 内部样式或 JS 都无法阻止浏览器原生缩放行为。
为 layer 弹窗容器禁用 touch-action
仅靠 viewport 不足以防止 layer 弹层区域被 pinch 缩放——当弹层内容区获得焦点或存在可滚动区域时，部分浏览器仍允许局部缩放。需显式禁用其手势响应：
在 layer.open 的 success 回调中，定位到弹层主体并设置 CSS：
success: function(layero) { layero.css('touch-action', 'none'); }
这会彻底禁用该 DOM 元素上所有多点触控手势（包括双指缩放、双击放大），但保留单指滚动（如内容溢出时的 scrollY）。注意：不要写成 touch-action: manipulation，它仍允许缩放；none 才是严格禁止。
针对 iframe 类型弹窗的额外处理
若弹窗为 type: 2（iframe 层），缩放可能来自 iframe 内部页面。此时需双向控制：
方法一：在 iframe 源页面的 中同样设置 viewport 禁用缩放；
方法二：若无法修改 iframe 页面源码，则在父页 success 回调中注入样式：
success: function(layero) { const iframe = layero.find('iframe')[0]; if (iframe && iframe.contentDocument) { const doc = iframe.contentDocument; const meta = doc.createElement('meta'); meta.name = 'viewport'; meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; doc.head.appendChild(meta); } }
此操作需确保 iframe 同源，否则因跨域限制无法访问 contentDocument。
验证是否生效的快速检查步骤
第一步：打开移动端浏览器开发者工具（如 Safari Web Inspector 或 Chrome Remote Debug）；
第二步：触发 layer 弹窗，选中弹层最外层元素（通常为 .layui-layer）；
第三步：在 Styles 面板中确认是否存在 touch-action: none，且 viewport meta 已存在于页面 ；
第四步：真机双指捏合，观察页面是否完全无缩放反应——若有，说明某处 viewport 未生效或 touch-action 未正确应用到实际渲染节点。
