/* ============================================================ DualStar · iOS / iPad 适配修复（最后加载，确保覆盖各 app 壳样式） 修复：iPhone/iPad 右侧与底部白边 根因与对策： 1. iOS Safari 的布局视口（fixed + top:0 锚定的）= 物理屏幕全高，底部会被地址栏 盖住 → 可视区底部露出浅色背景 = "底部白边"。→ body 高度改用 100dvh（动态视口）， 精确等于当前可视高度，地址栏收起/展开时实时跟随，底部导航始终留在可视区。 2. width:100vw 含滚动条宽度 → 横向溢出出右侧白边 → 一律 100%。 3. iPad（768~1366px 触屏）落入桌面分支导致 375px 小壳居中 → 触屏平板一律全屏铺满。 4. 用 any-pointer:coarse 而非 pointer:coarse —— iPad 接键盘/触控板后 主指针变为 fine，pointer:coarse 不再命中，修复会整体失效。 5. 安全区：普通 iOS Safari 下 env(safe-area-inset-*) 常返回 0，即使内容实际在 系统状态栏下面 / 会被 home indicator 遮挡。index.html 的 applySafeAreaFallback 会实测 env() 并按模式注入 --safe-area-top / --safe-area-bottom 兜底值； 全部 CSS 用 var(--safe-area-*, env(...)) 形式引用，一处注入全局生效。 v353：整体重写本文件 —— 修复 v460 起累积的文件结构损坏（缺少 9 个右花括号， 5 个重复且残缺的 @media 块互相嵌套、注释与规则互相吞并，导致部分修复规则 【脱离媒体查询在桌面端也生效】、部分声明被解析器丢弃，iOS 底部 34px 白区 反复出现）。本次仅清理结构，保留全部原有修复语义，逐条核对后重排为单一 清晰的 @media 层级。 ============================================================ */ /* —— 触屏设备（iPhone / iPad / Android，含外接触控板）：布局链 = body dvh 高度 —— */ @media (any-pointer: coarse) { /* 触屏设备：毛玻璃由纯白 rgba(255,255,255,.96) 改为浅灰 —— iOS 上所有用 --bg-glass 的底部栏/面板（微信子栏、短信/相册/邮件/音乐/设置/面具/世界书/ 纪念日/离线…输入框与工具栏）原本渲染成死白「白块」。改为浅灰后读作正常底栏 chrome，不再像空白。仅触屏生效，桌面端保持原白。 */ :root { --bg-glass: rgba(255, 255, 255, 0.55); } /* 根画布底色改次级浅灰 --bg-soft（而非近白 --bg）：任何安全区带/未铺满区域 露出的都是浅灰而非死白，从根上消除「处处白块」。 */ html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg-soft) !important; } body { /* iOS：固定 body，防止橡皮筋滚动露白。 高度链：top:0 + bottom:0 四边锚定布局视口。【不要】用 height:100dvh—— iOS Safari 中 fixed 元素锚定「布局视口」（物理屏幕全高），地址栏在顶部展开时 100dvh=可视区高度（不含地址栏），body 底部停在可视区上方 → 底部露出 html 背景 = 用户看到的「底部一块空白区域」（所有页面都有）。 top+bottom 拉伸使 body 恰好=布局视口：地址栏收起=全屏、展开=可视区，底部 永远贴底不露白；现代 iOS（15.4+）布局视口随地址栏收缩 → 顶部同样不被盖。 键盘弹出时布局视口收缩 → 输入条自然顶到键盘上方（不飞起）。 100vh 作为旧系统回退由下方 @supports 块处理。 */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: auto; } /* PWA standalone（已添加到主屏幕）：真正消除「屏幕最底部白边」的关键。 根因（此前多轮误判）：iOS 上 `position:fixed; bottom:0` 与 `height:100%/100dvh` 都锚定到【小视口】高度（= innerHeight，不含 home indicator 安全区，约 810px）， 而物理屏高 ≈ 844px，最底 34px 在 html/body 盒子之外 → 露出 WebKit 默认白画布 = 用户看到的「底部白色区域」。悬浮球用 innerHeight 做边界也印证：它永远拖不进那 34px。 别的 PWA 没有此白边，是因为它们把根容器撑到全屏（含安全区）。 修法：standalone 下 html/body 改用 `100vh`（large viewport = 全屏含安全区； standalone 无地址栏，100vh 即完整物理屏高），盒子铺满 0→844，白色画布被彻底盖住。 - `bottom:auto` + `height:100vh` + `top:0`：过度约束时 top+height 生效、bottom 忽略， body 精确 0→844px，安全区被底色（壁纸/home 页、--bg-soft 其它页）覆盖，不再露白。 - 键盘弹出时 100vh 不跟随 visualViewport 收缩 → 不会「点输入框页面飞起」。 */ html[data-pwa] { height: 100vh; } html[data-pwa] body { bottom: auto; height: 100vh; } /* 旧系统（iOS < 15.4 不支持 100dvh）：保持 top+bottom 四边锚定（height:auto）， 【不要】再覆盖成 height:var(--vph/100vh) —— 地址栏展开时布局视口比可视区高， 固定 height 会把 body 底部停在可视区上方，屏幕最底部露出 html 背景 = 全部页面底部白边 */ @supports not (height: 100dvh) { body { height: auto; } } #app { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; overflow: hidden; } /* —— view 层改为 absolute（相对 #app），跟随 body 的 dvh 高度。 若保持 fixed，会重新锚定到布局视口（全高），白边复现 —— */ .phone-view, .wechat-view, .settings-view, .mail-view, .worldbook-view, .mask-view, .album-view, .anniv-view, .offline-view, .ms-view, .sms-view { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* —— 所有 app 壳：触屏设备一律铺满父容器（父容器已是 top:0 全屏） —— */ .phone-shell, .wechat-shell, .settings-shell, .mail-shell, .worldbook-shell, .mask-shell, .album-shell, .anniv-shell, .offline-shell, .ms-shell, .sms-shell { width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; box-shadow: none !important; border: none !important; margin: 0; } .phone-view, .wechat-view, .settings-view, .mail-view, .worldbook-view, .mask-view, .album-view, .anniv-view, .offline-view, .ms-view, .sms-view { padding: 0; align-items: stretch; justify-content: stretch; } /* 触屏设备：phone-shell 底部安全区由 padding 容纳，wallpaper（absolute top:0） 自然延伸覆盖 padding → 壁纸延伸到屏幕物理底部，无视觉断点/白条。 其余壳的底部安全区由各自内部 tabbar/输入条（calc(...+safe-area-bottom)）自行容纳， 【不能再】加 shell 级 padding —— 否则与内部安全区叠加成双倍高度，底部反而露出色差带。 【注意】v413 曾把 background:var(--bg) 强制到所有壳上，导致纯白背景与 浅灰页面元素（--bg-soft/--surface）色差被放大（用户反馈白边变多）， 已回退为仅 phone-shell 兜底；其余壳保留各自的 var(--bg) 背景即可。 */ .phone-shell { background: transparent !important; } .wechat-shell, .settings-shell, .mail-shell, .worldbook-shell, .mask-shell, .album-shell, .anniv-shell, .offline-shell, .ms-shell, .sms-shell { background: var(--bg-soft) !important; } /* ====== 触屏 Dock：真 iOS 毛玻璃风格 + 通栏铺底 ====== 根因：dock 原用不透明背景 + 左右 margin(10px) + 圆角，在自定义壁纸上是「白卡片」； 且 dock 下方安全区段（home indicator 区）露出壳底色/body = 白条。 修法：① backdrop-filter blur 毛玻璃 + 半透明背景，透出壁纸颜色； ② 触屏下去掉左右 margin + 底边圆角 = 通栏，磨砂背景靠 padding-bottom （含 --safe-area-bottom 兜底 34px）一直铺到屏幕最底边，无安全区白条。 */ .phone-dock { /* 用户要求 dock 整体下移：加大与上方 App 网格的间距（flex 列布局下 content 占满剩余空间，dock 顶 margin 越大，网格被上推、dock 视觉上越靠下）。 底边仍贴屏幕底部（margin-bottom:0），毛玻璃背景靠 padding-bottom 含安全区铺满。 */ margin: 28px 0 0 !important; border-radius: var(--r-xl) var(--r-xl) 0 0 !important; background: rgba(255, 255, 255, 0.55) !important; -webkit-backdrop-filter: blur(25px) saturate(180%); backdrop-filter: blur(25px) saturate(180%); border: none !important; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06) !important; /* 兜底：毛玻璃背景一直铺到屏幕最底边（含安全区），杜绝 dock 下方露白 */ padding-bottom: calc(14px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))) !important; } /* 暗色主题下 dock 用暗色毛玻璃 */ [data-theme="dark"] .phone-dock { background: rgba(30, 30, 30, 0.6) !important; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06) !important; } /* 兜底：壁纸相对视口固定铺满，确保 shell 透明后屏幕最底部（含安全区）是壁纸而非 body */ .phone-shell .phone-wallpaper { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; } /* ====== 触屏微信 tabbar / 聊天输入栏 / 短信输入栏：同样毛玻璃 + 顶部分隔 ====== 同理，这些栏在壁纸或深色内容上方也不应是死白/死灰块。 用户要求所有页面底部栏「往下移」：统一加 margin-top，使底栏与上方内容留出呼吸感 （flex 列布局下，底栏顶 margin 越大，上方内容越被上推、底栏视觉上越靠下）。 */ .wx-tabbar { margin-top: 10px !important; background: rgba(255, 255, 255, 0.55) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-top: none !important; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06) !important; } [data-theme="dark"] .wx-tabbar { background: rgba(30, 30, 30, 0.6) !important; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06) !important; } .chat-input-area { margin-top: 8px !important; background: rgba(255, 255, 255, 0.6) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-top: none !important; } [data-theme="dark"] .chat-input-area { background: rgba(30, 30, 30, 0.65) !important; } .sms-input-bar { margin-top: 8px !important; background: rgba(255, 255, 255, 0.6) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-top: none !important; } [data-theme="dark"] .sms-input-bar { background: rgba(30, 30, 30, 0.65) !important; } /* 音乐 / 离线 App 的持久底栏同样「往下移」留呼吸感 */ .ms-tabbar, .offline-tabbar { margin-top: 10px !important; } .offline-chat-input-bar { margin-top: 8px !important; } } /* —— iPad 全屏双栏：「我」页资料卡额外下移（仅 ≥769px 触屏设备） 全屏双栏模式（iPad 横屏常用，≥769px 触屏）：「我」页面资料卡再下移一些， 桌面式布局下 56px 视觉上仍偏挤。 限定 min-width:769px：data-display-mode=fullscreen 是全设备默认值， 若不限定会误伤 iPhone（把 56px 覆盖成 72px，叠加安全区失效 → 名字顶得更高）。 —— */ @media (any-pointer: coarse) and (min-width: 769px) { [data-display-mode="fullscreen"] .wx-me-profile { padding-top: calc(84px + var(--safe-area-top, env(safe-area-inset-top, 0px))); } } /* —— 窄屏兜底：非触屏的小窗口（如桌面窄窗口）也铺满 —— */ @media (max-width: 768px) and (any-pointer: fine) and (hover: hover) { .phone-shell, .wechat-shell, .settings-shell, .mail-shell, .worldbook-shell, .mask-shell, .album-shell, .anniv-shell, .offline-shell, .ms-shell, .sms-shell { width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; box-shadow: none !important; } }