/* ================================================================ iPad Safari 演示适配 · 全站共享样式 原则：桌面/大屏零副作用——只有"触屏(pointer:coarse)"或"窄屏"才生效的规则 由 ecp-fx.js 自动注入(二级页/cockpit)，三维大屏/登录页 直接 ================================================================ */ /* —— 通用触控基础（全设备安全） —— */ *{-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%} /* —— 全局小号·低调 全屏按钮（右下角，半透明，不抢眼、不影响页面效果）—— 替代各页原来的文字版全屏按钮；由 ecp-fx.js / 各页内联脚本注入 #ecp-fs */ .fs-btn,#fsBtn{display:none !important} /* 隐藏旧的"⛶ 全屏"文字按钮，统一用下面这个悬浮小按钮 */ #ecp-fs{position:fixed;right:14px;bottom:13px;z-index:2147482000;width:32px;height:32px;border-radius:8px; display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;line-height:1; color:rgba(215,240,252,.8);background:rgba(11,26,40,.62);border:1px solid rgba(35,211,236,.32); box-shadow:0 2px 10px rgba(0,6,14,.4);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px); opacity:.72;transition:.16s;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} #ecp-fs:hover{opacity:1;color:#eafaff;border-color:rgba(35,211,236,.7);background:rgba(14,34,52,.78)} #ecp-fs:active{transform:scale(.92)} /* iPad 不支持网页全屏 API 时，点按钮弹出的引导提示条 */ #ecp-fstip{position:fixed;right:14px;bottom:52px;z-index:2147482001;max-width:min(320px,82vw); padding:10px 14px;border-radius:10px;font-size:12.5px;line-height:1.6;color:#eaf7ff; background:rgba(11,26,40,.94);border:1px solid rgba(35,211,236,.4);box-shadow:0 8px 26px rgba(0,6,14,.6); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(8px); pointer-events:none;transition:.22s} #ecp-fstip.on{opacity:1;transform:translateY(0)} #ecp-fstip b{color:#6fe6f5;font-weight:700} /* 三维 / 手势容器：手势归 App，别让 Safari 拿去缩放整页 */ #stage,#stage>canvas,#twin,#twin>canvas,.gl-stage,canvas.webgl{touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none} /* —— 触摸设备专属（不影响桌面鼠标） —— */ @media (pointer:coarse){ /* 去 300ms 点击延迟 */ a,button,.btn,.chip,.tab,.seg,.pill,.l2nav-a,.kpi,.card,.hrow,.bar,.corner,[onclick],[role="button"]{touch-action:manipulation} /* 主要可点控件补足触控热区(≥40px，接近 44pt) */ .l2nav-a,.btn,.tab,.seg button,button.btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center} .chip,.pill{min-height:32px;display:inline-flex;align-items:center} /* 点按反馈 */ a.btn:active,.btn:active,.chip:active,.l2nav-a:active,.card:active,.kpi:active{transform:scale(.97)} /* 惯性滚动，避免嵌套滚动卡顿 */ .left,.right,.scroll,.list,.panel,[data-scroll]{-webkit-overflow-scrolling:touch} /* 消除长按选中/系统菜单对演示的干扰(文本区除外) */ .topbar,.l2top,.kpis,.legend,.brandfoot,.l2nav{-webkit-user-select:none;-webkit-touch-callout:none} } /* —— 仪表盘窄屏防撑破(≤1440)：给 grid/flex 子项 min-width:0，让 1fr 正常收缩， 解决"中间宽图表把三栏撑出视口"的经典 grid-blowout（大屏无副作用，有余量时 min-width:0 不生效） —— */ @media (max-width:1440px){ .main,.col,.kpis,.wrap,.lwrap,.fwrap,.lmain,.lcol,.grid,.row,.cards{min-width:0} .main>*,.col>*,.kpis>*,.wrap>*,.lwrap>*,.fwrap>*,.lmain>*,.lcol>*{min-width:0;max-width:100%} .panel{min-width:0} /* 面板是最常见的栅格子项，min-width:0 让 1fr 正常收缩，通用防撑破 */ } /* —— iPad 带地址栏时可用高度被吃矮(≤770,触屏)：固定高仪表盘改为可纵向滚动 + 主区给最小高度， 避免右侧堆叠面板被挤压重叠(添加到主屏幕全屏后高度足够，此规则不触发) —— */ @media (max-height:770px) and (min-width:900px){ html,body{overflow-y:auto !important;height:auto !important} .wrap,.lwrap,.fwrap{height:auto !important;min-height:0 !important} .main,.lmain,.fmain{min-height:470px} } /* —— iPad 横屏/窄屏：万一仍有超宽内容，宁可整体滚动，也不硬裁切 —— */ @media (max-width:1366px) and (pointer:coarse){ html,body{overflow-x:auto} } /* —— 窄屏(≤1366)隐藏在线率 KPI 的"详情›"角标：压缩后与"通电在线率"长标题重叠(大屏保留；KPI 仍可点开保障看板) —— */ @media (max-width:1366px){ .kpi.ogclick::after{display:none} /* 面板信息提示(.ptip)隐藏态改 display:none：不占布局、不再从右侧面板溢出撑出横向滚动(悬停/触摸仍显示) */ .pinfo .ptip{display:none} .pinfo:hover .ptip,.pinfo:active .ptip,.pinfo:focus-within .ptip{display:block} } /* —— 全面屏安全区（刘海 / 底部指示条），仅触屏 —— */ @media (pointer:coarse){ .topbar,.l2top,.brandfoot{padding-left:max(env(safe-area-inset-left),12px);padding-right:max(env(safe-area-inset-right),12px)} } /* —— PWA 独立模式(添加到主屏→全屏启动)：顶部状态栏叠加，顶栏留出安全区(iPad 横屏通常为 0，有刘海机型才生效) —— */ @media (display-mode:standalone){ body{padding-top:env(safe-area-inset-top)} } /* —— Safari backdrop-filter 前缀 —— */ @supports ((-webkit-backdrop-filter:blur(1px)) and (not (backdrop-filter:blur(1px)))){ .panel,.card,.modal,.ex-card,.legend-pop,.uitip,.topbar,.l2top{-webkit-backdrop-filter:blur(14px)} } /* —— 竖屏引导层：请横置 iPad（#ipad-rotate 由 JS 注入；仅触屏+竖屏+窄屏显示） —— */ #ipad-rotate{display:none} @media (orientation:portrait) and (max-width:1024px) and (pointer:coarse){ #ipad-rotate{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:16px;padding:32px;text-align:center; background:radial-gradient(120% 90% at 50% 0,#16243a 0%,#0b1018 68%,#080d14 100%); color:#eaf2fb;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif} #ipad-rotate .ic{font-size:58px;line-height:1;animation:ipadrot 2.4s ease-in-out infinite} #ipad-rotate b{font-size:20px;letter-spacing:1px} #ipad-rotate span{font-size:13px;color:#8c9bb0;max-width:300px;line-height:1.75} } @keyframes ipadrot{0%,100%{transform:rotate(0)}45%,55%{transform:rotate(-90deg)}}