/** * 真机适配修复（mobile-real-device-fix.css） * * 目标： * 1) 在 iOS / 安卓真机的窄屏 / 矮屏上让「快捷功能按钮」「微信朋友圈顶部卡片三按钮」等元素按比例自动缩小， * 避免重叠或遮挡昵称/头像。 * 2) 快捷按钮内图标尽量占满 70×70 按钮区域（与 style.css 统一尺寸一致）。 * 3) 在 vivo / Opera 等浏览器上强化中英文自动换行，避免长消息被截断。 * 4) 弹起虚拟键盘时，避免微信底部导航栏 / 聊天底栏跟着上拱挤压可视区域。 * 5) v1.0.12：弹窗 + 键盘态用 visualViewport 变量贴合可视区，修复 Chromium 强制全屏下 * Chrome autofill 条（钥匙/银行卡/地址）悬浮错位（小米/华为/OPPO/三星等）。 * 6) v1.0.13：聊天窗口闪屏兼容（flat-glass）。华为 麦芒11 + Edge 等安卓 Chromium 内核 * 在微信聊天页里因大量 backdrop-filter 毛玻璃层（消息气泡 / 输入栏 / 头部）叠加于 * 滚动背景之上而逐帧重采样，整屏闪烁刺眼。命中 html.lovemi-chat-flat-glass * （由 index.html 头部内联脚本判定：安卓 / 鸿蒙 / 不支持 backdrop-filter 的浏览器）时， * 把聊天窗口毛玻璃降级为等效半透明实色，彻底消除闪屏；iPhone / 桌面端保留毛玻璃。 * 7) v1.0.20： * (a) 世界书「贴合小手机屏」弹窗排除通用居中卡片键盘压缩，修复 iPhone 17 编辑世界书 * 时取消/保存漂在中段、键盘上方大块空白； * (b) 全站可编辑控件 font-size ≥16px 兜底，消除 iOS 聚焦自动放大导致的「字突然变大 / * 框架抖动」。 * * 加载顺序：在 style.css 之后；本文件只 *覆盖* 既有规则，不引入新的布局结构。 */ /* ------------------------------------------------------------------ */ /* 1) 快捷功能按钮：玻璃方块只包图标（52×52），名称独立在方块下方 */ /* ------------------------------------------------------------------ */ .function-icon { flex: 0 0 auto !important; width: 52px !important; max-width: 52px !important; height: 52px !important; max-height: 52px !important; } .function-icon img { width: 32px !important; height: 32px !important; object-fit: contain !important; border-radius: 0; } .function-icon img.theme-icon-img--custom, .nav-icon img.theme-icon-img--custom, .sub-screen-action-icon-img.theme-icon-img--custom, .ss2sc-icon-img.theme-icon-img--custom { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; object-fit: cover !important; -webkit-object-fit: cover !important; object-position: center !important; padding: 0 !important; box-sizing: border-box !important; border-radius: inherit !important; transform: none !important; flex: 1 1 auto !important; } /* 底栏 dock：自定义图标仍铺满图标区 */ .nav-icon.theme-icon-wrap--custom { display: flex !important; overflow: hidden !important; align-items: stretch !important; justify-content: stretch !important; width: 100% !important; aspect-ratio: auto !important; height: auto !important; max-height: calc(var(--home-quick-btn-size, 70px) - 20px) !important; flex: 1 1 auto !important; border-radius: 11px !important; } /* 主屏/子屏/②号屏磁贴：自定义图标铺满 52×52 玻璃方块（名称在方块外，不受挤压） */ .function-icon.theme-icon-wrap--custom, .sub-screen-action-icon.theme-icon-wrap--custom, .ss2sc-icon.theme-icon-wrap--custom { display: flex !important; overflow: hidden !important; align-items: stretch !important; justify-content: stretch !important; flex: 0 0 auto !important; aspect-ratio: auto !important; width: 52px !important; height: 52px !important; max-height: 52px !important; border-radius: 15px !important; } .nav-item:has(.theme-icon-wrap--custom) { padding: 4px 4px 3px !important; } .function-item:has(.theme-icon-wrap--custom), .sub-screen-action:has(.theme-icon-wrap--custom), .ss2sc-tile:has(.theme-icon-wrap--custom) { padding: 0 !important; } /* 自定义悬浮球：真机上贴合圆形 */ #main-float-btn .main-float-btn-img.main-float-btn-img--custom, #main-float-btn .main-float-btn-img.theme-icon-img--custom { object-fit: cover !important; -webkit-object-fit: cover !important; object-position: center !important; padding: 0 !important; box-sizing: border-box !important; } .sub-screen-split .sub-screen-actions .sub-screen-action-icon { flex: 0 0 auto !important; width: 52px !important; max-width: 52px !important; height: 52px !important; max-height: 52px !important; } .sub-screen-action-icon-img { width: 30px !important; height: 30px !important; object-fit: contain !important; } .nav-icon { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: calc(var(--home-quick-btn-size, 70px) - 24px) !important; } .nav-icon img { object-fit: contain !important; } /* ------------------------------------------------------------------ */ /* 2) 极窄屏：略缩小间距，按钮仍保持 70×70（与主屏规范一致） */ /* ------------------------------------------------------------------ */ @media (max-width: 360px), (max-height: 640px) { .function-name { font-size: 9px !important; } .quick-functions { gap: 10px !important; } .bottom-nav { width: min(330px, calc(100% - 18px)) !important; padding: 6px 6px !important; gap: 8px !important; } .nav-name { font-size: 9px !important; } } /* 极小屏（iPhone SE 1 等 320px 宽） */ @media (max-width: 340px) { .quick-functions { gap: 8px !important; } .function-name { font-size: 9px !important; } } /* ------------------------------------------------------------------ */ /* 3) 微信朋友圈顶部「返回 / 刷新 / 发布」三按钮：上移并按屏宽缩放 */ /* 旧规则：top = max(12, safe-area) + 12 + 22 + 10 - 8 ≈ 48-62px */ /* 现规则：上移约 14-18px，并把 40x40 改成可随屏缩放的 clamp 尺寸 */ /* ------------------------------------------------------------------ */ .moments-floating-toolbar { /* 顶移 14px，让按钮整体上抬，避免遮挡封面下方的头像/昵称 */ top: calc(max(12px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) + 12px + 22px - 4px) !important; padding: 10px 12px 12px !important; } .moments-toolbar-back, .moments-toolbar-icon-btn { /* 40x40 在 < 360px 宽的真机会和返回按钮共占太多横向；按屏宽自适应缩到 32px 起 */ width: clamp(32px, 9.5vw, 40px) !important; height: clamp(32px, 9.5vw, 40px) !important; border-radius: clamp(9px, 2.6vw, 12px) !important; } .moments-toolbar-right { /* 按钮间距按屏宽自适应；窄屏从 14px 收到 10px，避免压住昵称 */ gap: clamp(8px, 2.8vw, 14px) !important; } .moments-line-icon { width: clamp(18px, 5.6vw, 24px) !important; height: clamp(18px, 5.6vw, 24px) !important; } .moments-line-icon--md { width: clamp(22px, 6.6vw, 28px) !important; height: clamp(22px, 6.6vw, 28px) !important; } /* 窄屏 (< 360px) 下进一步收缩；并把封面下沿的头像 + 昵称的水平空间预留出来 */ @media (max-width: 360px) { .moments-floating-toolbar { padding: 8px 10px 10px !important; top: calc(max(8px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) + 10px + 22px - 6px) !important; } .moments-toolbar-back, .moments-toolbar-icon-btn { width: 32px !important; height: 32px !important; border-radius: 9px !important; } .moments-toolbar-right { gap: 8px !important; } /* 封面右下角的「昵称 + 头像」整体下移一点点，确保即使按钮再下移也不会被压住 */ .moments-cover-bottom-meta { gap: 8px !important; } } /* ------------------------------------------------------------------ */ /* 4) 微信聊天消息：真机 WebKit 换行优化 */ /* 线上纯文本：normal 空白 + 中文自然折行（避免 pre-wrap 把 AI 单换行渲染成硬断行） */ /* 线下叙事 / 富文本 / 语音：保留各自原有换行策略 */ /* ------------------------------------------------------------------ */ #chat-page .chat-message-bubble:not(.chat-message-bubble--offline):not(.chat-message-bubble--offline-rich):not(.chat-message-bubble--voice):not(.chat-message-bubble--polaroid):not(.chat-message-bubble--gift-bundle):not(.chat-message-bubble--redpacket):not(.chat-message-bubble--rich-html):not(:has(.chat-transfer-bubble)):not(:has(.chat-location-bubble)):not(:has(.chat-photo-flip-root)):not(:has(.wechat-polaroid-wrap)):not(:has(.art-vibe)) { overflow-wrap: break-word !important; word-break: normal !important; white-space: normal !important; line-break: auto; } #chat-page .chat-message-bubble--offline .chat-message-segment, #chat-page .chat-message-bubble--offline-rich .chat-message-segment--offline-rich { overflow-wrap: break-word !important; word-break: break-word !important; white-space: pre-wrap !important; } #chat-page .chat-message-bubble--rich-html, #chat-page .chat-message-bubble--rich-html * { overflow-wrap: anywhere !important; word-break: break-word !important; } #chat-page .chat-message-bubble--voice .chat-voice-transcript { overflow-wrap: break-word !important; word-break: normal !important; white-space: normal !important; } /* 极窄屏（<=360px）下普通线上文本气泡稍微收紧 max-width； 线下叙事气泡（offline / offline-longform / offline-rich）一律排除 — 它们要铺满屏幕， 否则在 vivo / OPPO Via / 三星 / 华为 / 小米 Chrome 上会被压成"居中窄柱"，阅读体验极差。 */ @media (max-width: 360px) { #chat-page .chat-message-bubble:not(.chat-message-bubble--offline):not(.chat-message-bubble--offline-longform):not(.chat-message-bubble--offline-rich):not(.chat-message-bubble--redpacket) { /* 气泡开启时间/已读后会被包进 shrink-to-fit 的 inline-flex 行。 百分比若相对这个包裹层计算，会形成「wrapper 越窄 -> 气泡 74% 越窄」的 循环约束；部分 vivo / OPPO WebView 最终把短句压到不足半屏。 这里的产品约束本来就是“不超过手机屏幕约 3/4”，应直接相对视口。 */ max-width: 74vw !important; } } /* ------------------------------------------------------------------ */ /* 5) 微信输入框聚焦弹键盘时隐藏底栏并调整输入区位置 */ /* 核心策略：让输入框容器 fixed 定位到 bottom: 0，浏览器会自动将其 */ /* 放置在键盘顶部，消除悬空间隙 */ /* */ /* v1.0.5 (2026-05-23) 关键修复： */ /* - 三星 Galaxy S23 Ultra / Chrome Android 报告：发送完消息后 */ /* data-mobile-keyboard-open 标记残留 "1"（焦点已失但事件链路 */ /* 在 Chromium 边缘场景下没把它清掉），导致 composer 永久卡在 */ /* position:fixed 中段，chat-header 看似消失、composer 下方一段 */ /* 白色空白、用户无法点返回。 */ /* - 现在所有「fixed 定位 / chat-content padding 兜底」规则都额外 */ /* 要求 `:focus-within`（即真的有输入框在焦点）。这样即使 */ /* data-mobile-keyboard-open 残留，只要焦点离开输入框，CSS 自动 */ /* 回到正常文档流，不会再卡死。 */ /* - 仅「隐藏底栏 / 悬浮球」这种 视觉副作用 仍只看 attribute， */ /* 不会因为短暂失焦就闪烁。 */ /* ------------------------------------------------------------------ */ body[data-mobile-keyboard-open="1"] .bottom-nav, body[data-mobile-keyboard-open="1"] .wechat-tabbar, body[data-mobile-keyboard-open="1"] .wechat-bottom-nav, body[data-mobile-keyboard-open="1"] .wechat-me-bottom-nav, body[data-mobile-keyboard-open="1"] #wechat-page .wechat-bottom, body[data-mobile-keyboard-open="1"] .friend-phone-bottom-nav, body[data-mobile-keyboard-open="1"] .friend-phone-wechat-tabbar { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transform: translateY(120%) !important; transition: transform 0.18s ease, opacity 0.18s ease !important; } /* 确保在非键盘状态下，底栏始终可见（修复导入后底栏消失问题） */ body:not([data-mobile-keyboard-open="1"]) .bottom-nav, body:not([data-mobile-keyboard-open="1"]) .wechat-tabbar, body:not([data-mobile-keyboard-open="1"]) .wechat-bottom-nav, body:not([data-mobile-keyboard-open="1"]) .wechat-me-bottom-nav, body:not([data-mobile-keyboard-open="1"]) #wechat-page .wechat-bottom, body:not([data-mobile-keyboard-open="1"]) .friend-phone-bottom-nav, body:not([data-mobile-keyboard-open="1"]) .friend-phone-wechat-tabbar { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; } /* 关键修复：确保聊天底部输入区在非键盘状态下始终可见 */ body:not([data-mobile-keyboard-open="1"]) #chat-page .chat-bottom-composer, body:not([data-mobile-keyboard-open="1"]) #chat-page .chat-input-area, body:not([data-mobile-keyboard-open="1"]) .friend-phone-char-composer-wrap { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; display: flex !important; } /* 全屏模式下的聊天底部组件强制可见（即使在非键盘状态） */ body.ios-fullscreen-mode:not([data-mobile-keyboard-open="1"]) #chat-page .chat-bottom-composer, body.ios-fullscreen-mode:not([data-mobile-keyboard-open="1"]) #chat-page .chat-input-area { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; display: flex !important; position: relative !important; } body[data-mobile-keyboard-open="1"] #love-mi-main-floating-ball, body[data-mobile-keyboard-open="1"] .main-floating-ball { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* 确保在非键盘状态下，悬浮球始终可见（修复导入后悬浮球消失问题） */ body:not([data-mobile-keyboard-open="1"]) #love-mi-main-floating-ball, body:not([data-mobile-keyboard-open="1"]) .main-floating-ball { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* 主微信聊天输入区：固定到底部，让浏览器自动将其放在键盘顶部 v1.0.5：额外要求 :focus-within，避免在 Samsung Galaxy / Chrome Android 等 Chromium 边缘场景下 data-mobile-keyboard-open 残留 "1" 时把 composer 永久卡在 fixed 状态，导致用户看到中段输入栏 + 下方一段白色空白。 只要输入框确实有焦点，:focus-within 命中；焦点一离开，规则失效， composer 立即回到 #chat-page 的正常 flex 列布局（贴合 #app 底部）。 */ body[data-mobile-keyboard-open="1"] #chat-page.active .chat-bottom-composer:focus-within { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; z-index: 1000 !important; /* 使用 env(safe-area-inset-bottom) 确保在有虚拟 Home 键的设备上也能正确显示 */ padding-bottom: max(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)), 0px) !important; } /* 微信聊天页自己的 mobile-chat-keyboard-guard 会冻结 #app 高度并用 data-chat-keyboard-open 压缩消息区。此时继续 fixed 到浏览器窗口底部， Android Chrome / 小米 / 华为等机型会触发页面自动滚动，导致顶部栏被挤出。 */ body[data-mobile-keyboard-open="1"] #chat-page.active[data-chat-keyboard-open="1"] .chat-bottom-composer:focus-within { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; width: auto !important; transform: none !important; padding-bottom: 0 !important; display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 500 !important; } body[data-mobile-keyboard-open="1"] #chat-page.active[data-chat-keyboard-open="1"] .chat-input-area { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } body[data-mobile-keyboard-open="1"] #chat-page.active[data-chat-keyboard-open="1"] .chat-main-stack { min-height: 0 !important; overflow: hidden !important; } /* 聊天内容区域添加底部内边距：同样改为只在确实 focus-within 时才生效。 这样发送完消息只要焦点离开，padding 立刻回收，chat-content 自动撑满， chat-header / chat-bottom-composer 都会自然回到 #chat-page flex 列的 正确位置，下方不会再出现白色空白。 */ body[data-mobile-keyboard-open="1"] #chat-page.active .chat-bottom-composer:focus-within ~ .chat-content, body[data-mobile-keyboard-open="1"] #chat-page.active:has(.chat-bottom-composer:focus-within) .chat-content { padding-bottom: 160px !important; } body[data-mobile-keyboard-open="1"] #chat-page.active[data-chat-keyboard-open="1"]:has(.chat-bottom-composer:focus-within) .chat-content { padding-bottom: 16px !important; } /* 兜底：若浏览器不支持 :has() / 选择器顺序匹配失败，至少保证 composer 自带 focus-within 时 chat-content 有 padding；不强制 #chat-page 整体匹配。 */ body[data-mobile-keyboard-open="1"] #chat-page.active .chat-bottom-composer:focus-within { /* 自带额外底部空间，让最后一条消息不被输入框遮挡，无需依赖 chat-content padding */ margin-bottom: 0 !important; } /* 好友手机微信输入区：同样改为 :focus-within 兜底 */ body[data-mobile-keyboard-open="1"] .friend-phone-char-composer-wrap:focus-within { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; z-index: 1000 !important; padding-bottom: max(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)), 0px) !important; } /* 好友手机微信聊天屏幕区域调整：依赖 :has() 嗅探焦点；不支持 :has() 的旧 WebKit 仅 会失去额外的 padding-bottom，不会造成布局错乱（composer 仍正常处理）。 */ body[data-mobile-keyboard-open="1"] .friend-phone-char-chat-root:has(.friend-phone-char-composer-wrap:focus-within) .phone-wx-chat-screen, body[data-mobile-keyboard-open="1"] .friend-phone-wechat-body--messages.phone-app-content--wx-chat:has(.friend-phone-char-composer-wrap:focus-within) .phone-wx-chat-screen { padding-bottom: 160px !important; } /* 好友手机微信输入行 */ body[data-mobile-keyboard-open="1"] .friend-phone-char-input-row:focus-within { padding-bottom: max(8px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) !important; } /* 全屏模式下的额外优化（同样要求 :focus-within） */ body.ios-fullscreen-mode[data-mobile-keyboard-open="1"] #chat-page.active .chat-bottom-composer:focus-within, body.ios-fullscreen-mode[data-mobile-keyboard-open="1"] .friend-phone-char-composer-wrap:focus-within { /* 在全屏模式下，确保输入框完全贴合键盘 */ bottom: 0 !important; position: fixed !important; } /* v1.0.5 关键兜底（最高优先级）：当 body 没有 data-mobile-keyboard-open 时 （键盘真的不在），composer / friend-phone composer wrap 一律以 normal flow 渲染。即使 JS 一时没把 attribute 清掉、或某个 inline style 残留，本规则 也能把它们拽回正常 flex 列布局，从而保证： - chat-header（在 #chat-page 顶部）依旧可见、返回按钮可点； - chat-bottom-composer 贴合 #app 底部，不会出现下方一段白色空白； - 用户能正常返回上级页面。 注意：保留 z-index 不动（chat-input-area / composer 自身的 z-index 由 style.css 主规则维护，我们不强行改）。 */ body:not([data-mobile-keyboard-open="1"]) #chat-page.active .chat-bottom-composer, body:not([data-mobile-keyboard-open="1"]) .friend-phone-char-composer-wrap { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; } body:not([data-mobile-keyboard-open="1"]) #chat-page.active .chat-content, body:not([data-mobile-keyboard-open="1"]) .friend-phone-char-chat-root .phone-wx-chat-screen, body:not([data-mobile-keyboard-open="1"]) .friend-phone-wechat-body--messages.phone-app-content--wx-chat .phone-wx-chat-screen { /* revert 让 padding-bottom 回到原始 cascading 值（即 style.css 中 .chat-content 的 16px）；如果浏览器不支持 revert 关键字，回退到 initial 也不会出错（initial 是 0，初始边距）。 */ padding-bottom: revert !important; } /* 浏览器不支持 revert 的兜底（极少数旧版国产 WebView） */ @supports not (padding-bottom: revert) { body:not([data-mobile-keyboard-open="1"]) #chat-page.active .chat-content { padding-bottom: 16px !important; } body:not([data-mobile-keyboard-open="1"]) .friend-phone-char-chat-root .phone-wx-chat-screen, body:not([data-mobile-keyboard-open="1"]) .friend-phone-wechat-body--messages.phone-app-content--wx-chat .phone-wx-chat-screen { padding-bottom: 0 !important; } } /* ------------------------------------------------------------------ */ /* 6) 微信表情面板 */ /* ------------------------------------------------------------------ */ .wechat-emoji-panel:focus-within, .chat-emoji-panel:focus-within, .wechat-stickers-panel:focus-within { display: block !important; } /* ------------------------------------------------------------------ */ /* 7) 通用输入框容器优化：确保所有带输入框的底部容器都能正确响应键盘 v1.0.5：同样追加 :focus-within，避免在 data-mobile-keyboard-open 残留时这些容器永久卡在 fixed 状态。 */ /* ------------------------------------------------------------------ */ body[data-mobile-keyboard-open="1"] .chat-input-wrapper:focus-within, body[data-mobile-keyboard-open="1"] .wechat-composer:focus-within { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; } /* 键盘真的不在时强制还原（同样不动 z-index，避免影响 stacking） */ body:not([data-mobile-keyboard-open="1"]) .chat-input-wrapper, body:not([data-mobile-keyboard-open="1"]) .wechat-composer { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; } /* 确保输入框在键盘弹出时可见且可操作 */ body[data-mobile-keyboard-open="1"] input[type="text"]:focus, body[data-mobile-keyboard-open="1"] input[type="search"]:focus, body[data-mobile-keyboard-open="1"] input[type="email"]:focus, body[data-mobile-keyboard-open="1"] input[type="tel"]:focus, body[data-mobile-keyboard-open="1"] input[type="url"]:focus, body[data-mobile-keyboard-open="1"] input[type="number"]:focus, body[data-mobile-keyboard-open="1"] textarea:focus { /* 确保聚焦的输入框不会被键盘遮挡 */ scroll-margin-bottom: 20px !important; } /* iOS Safari 特定优化：防止页面缩放 */ @supports (-webkit-touch-callout: none) { body[data-mobile-keyboard-open="1"] input, body[data-mobile-keyboard-open="1"] textarea { font-size: 16px !important; } /* overlay 键盘态同样抬到 16px，避免 iOS Safari 聚焦时整页缩放导致编辑框错位 */ body[data-lovemi-overlay-kb="1"] #truth-or-dare-game input, body[data-lovemi-overlay-kb="1"] #truth-or-dare-game textarea, body[data-lovemi-overlay-kb="1"] #listen-together-overlay input, body[data-lovemi-overlay-kb="1"] #listen-together-overlay textarea { font-size: 16px !important; } } /* ------------------------------------------------------------------ */ /* 8) 安卓浏览器兼容性增强（OPPO、vivo、小米等） */ /* 修复导入数据后图标UI丢失、按钮不可见、点触无反应等问题 */ /* ------------------------------------------------------------------ */ /* 确保所有功能按钮在安卓设备上可见且可点击 */ .quick-functions, .bottom-nav, .function-btn, .nav-btn, .sub-screen-actions { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important; -webkit-user-select: none !important; user-select: none !important; } /* 修复安卓Chrome中图标可能不显示的问题 */ .function-icon img, .nav-icon img, .sub-screen-action-icon-img { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; will-change: auto !important; } /* 非加载态工具栏图标仍走 GPU 合成；加载态由外层 spin 容器负责 rotate，避免与 translateZ 冲突 */ .moments-toolbar-icon-btn:not(.is-loading):not(.is-moments-refresh-loading) .moments-line-icon { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; will-change: auto !important; } .moments-toolbar-icon-btn.is-loading .moments-refresh-icon-spin, .moments-toolbar-icon-btn.is-moments-refresh-loading .moments-refresh-icon-spin { will-change: transform !important; -webkit-animation: moments-refresh-spin 0.75s linear infinite !important; animation: moments-refresh-spin 0.75s linear infinite !important; -webkit-transform-origin: 50% 50% !important; transform-origin: 50% 50% !important; } /* 确保按钮文字在所有安卓浏览器中可见 */ .function-name, .nav-name, .sub-screen-action-label { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; } /* OPPO/vivo 的旧规则曾把 #app 与 .home-screen 整页强制提升为 GPU 层；分页页自身 又有 transform，形成嵌套 3D 层后会在小米/OPPO WebView 恢复②号屏时整层空白。 仅保留轻量、独立控件的提升，页面根节点使用普通层叠上下文。 */ .phone-container, .quick-functions { -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; } #app, .home-screen { -webkit-transform: none !important; transform: none !important; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } /* 小米/Chrome Android 输入法弹起时，fixed 输入栏 + translateZ 合成层容易触发整屏闪烁/黑屏。 键盘态短暂关闭主容器 GPU 提升，键盘收起后仍沿用上面的常规优化。 */ body[data-mobile-keyboard-open="1"] #app, body[data-mobile-keyboard-open="1"] .phone-container, body[data-mobile-keyboard-open="1"] .home-screen, body[data-mobile-keyboard-open="1"] .sub-screen-split { -webkit-transform: none !important; transform: none !important; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } /* 确保主屏和子屏的所有交互元素都能响应点击 */ .function-btn, .nav-btn, .sub-screen-action-btn, .moments-toolbar-back, .moments-toolbar-icon-btn { cursor: pointer !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important; touch-action: manipulation !important; } /* 修复安卓设备上可能出现的透明度问题 */ body:not([data-mobile-keyboard-open="1"]) .function-btn, body:not([data-mobile-keyboard-open="1"]) .nav-btn, body:not([data-mobile-keyboard-open="1"]) .quick-functions, body:not([data-mobile-keyboard-open="1"]) .bottom-nav { opacity: 1 !important; visibility: visible !important; } /* 针对OPPO ColorOS浏览器的特殊优化 */ @media screen and (-webkit-min-device-pixel-ratio: 2) { .function-icon img, .nav-icon img { image-rendering: -webkit-optimize-contrast !important; image-rendering: crisp-edges !important; } } /* 修复Via浏览器和Edge移动版的兼容性 */ @supports (not (-webkit-touch-callout: none)) { /* 非iOS设备（主要是安卓） */ .function-btn, .nav-btn { -webkit-user-drag: none !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important; } } /* 确保在页面加载完成后所有元素都正确显示 */ body.loaded .quick-functions, body.loaded .bottom-nav, body.loaded #love-mi-main-floating-ball { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* 修复雨见浏览器可能出现的渲染问题 */ .phone-container, .home-screen, .sub-screen-split { contain: layout style !important; } /* ------------------------------------------------------------------ */ /* 9) `100dvh` / `100vh` 单位 stale bug 兜底 */ /* （Android Chromium 系 + iOS 26 Safari 共用） */ /* */ /* 场景 A（Android Chromium，特别是三星 Galaxy S 系列 Chrome）： */ /* 开启 lovemi 强制全屏（requestFullscreen API）→ 退出后， */ /* Chromium 的 dvh / vh 单位在某些机型/版本上会保留为进入全屏时 */ /* 的状态，导致 #app 和 body 实际高度小于浏览器可视区，输入框 */ /* 下方露出 html 的默认白色背景。 */ /* */ /* 场景 B（iOS 26 Safari，iPhone 17 用户实测）： */ /* 底部地址栏收起/展开、或键盘弹起收起后，100dvh 计算值卡在 */ /* 旧状态，#app 渲染高度小于真实可视区，界面下方突然出现一节 */ /* 空白（WebKit 已知缺陷）。 */ /* */ /* 触发条件（由 mobile-real-device-fix.js 控制）： */ /* - Android Chromium 浏览器（applyViewportFix 路径），或 */ /* iOS 设备（applyIOSViewportStabilize 路径，v1.0.13 新增） */ /* - 当 JS 实测视口高度与 `100dvh` 像素值差异 > 32px 时 */ /* - 非键盘弹起、非浏览器原生全屏 / iOS 模拟全屏中 */ /* */ /* 兜底机制： */ /* - 用 `--lovemi-app-height` CSS 变量（JS 写入像素值）替代 */ /* `100dvh` / `100vh` 表达式 */ /* - 仅在 body[data-lovemi-vp-fix="1"] 时生效，对其他设备/浏览器 */ /* （华为 / 小米 / OPPO / vivo / 桌面等 dvh 正常的环境）零影响 */ /* ------------------------------------------------------------------ */ body[data-lovemi-vp-fix="1"] { min-height: var(--lovemi-app-height, 100dvh) !important; height: var(--lovemi-app-height, 100dvh) !important; } body[data-lovemi-vp-fix="1"] #app { min-height: var(--lovemi-app-height, 100dvh) !important; max-height: var(--lovemi-app-height, 100dvh) !important; height: var(--lovemi-app-height, 100dvh) !important; } /* 桌面尺寸（>= 481px）保留上下 20px 间距，与 style.css 原规则保持一致 */ @media (min-width: 481px) { body[data-lovemi-vp-fix="1"] #app { min-height: calc(var(--lovemi-app-height, 100dvh) - 40px) !important; max-height: calc(var(--lovemi-app-height, 100dvh) - 40px) !important; height: calc(var(--lovemi-app-height, 100dvh) - 40px) !important; } } /* ------------------------------------------------------------------ */ /* 9b) 键盘态（resize 模式）文档滚动收口 */ /* */ /* resize 模式 = layout viewport 已被输入法压缩（Capacitor adjustResize、*/ /* Android 15+ 的 IME inset 补偿、vivo/魅族 Via），由 */ /* mobile-real-device-fix.js 的 detectKeyboardMode() 统一判定并写在 */ /* body[data-lovemi-kb-mode] 上。 */ /* */ /* 此时如果文档还留着可滚动余量，系统的「把输入框滚进可视区」会把整页 */ /* 滚走——用户看到的就是界面底部整个抬起、露出上级菜单，随后各处 */ /* scrollTo 钉位再来回拉扯，形成整屏抖动。高度本身由 JS 按实测值收紧 */ /* （clampAppHeightLockForKeyboard / freezeAppHeight，不能用 dvh，因为 */ /* 这套兜底存在的前提就是 dvh 在部分安卓机型上会卡住失准），这里只做 */ /* 「不许滚」这一件 CSS 能可靠保证的事。 */ /* ------------------------------------------------------------------ */ html[data-lovemi-kb-mode="resize"], body[data-lovemi-kb-mode="resize"] { overflow: hidden !important; overscroll-behavior: none !important; } /* ------------------------------------------------------------------ */ /* 6) 微信转账卡片：WebKit / 部分国产浏览器真机渲染修复 */ /* - 避免装饰边框层叠到金额文字上 */ /* - 状态文案勿被误渲染成带边框的「按钮块」 */ /* - 不依赖 :has()，仅用 --transfer 类名，兼容 Via / 旧版 Safari */ /* ------------------------------------------------------------------ */ #chat-page .chat-message-bubble.chat-message-bubble--transfer { padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 红包与转账同属独立业务卡片：不得被普通气泡或窄屏 74% 规则再次包裹、裁切。 */ #chat-page .chat-message .chat-message-bubble.chat-message-bubble--redpacket:not(#lovemi-rp):not(#lovemi-rp):not(#lovemi-rp) { display: block !important; width: 228px !important; max-width: 100% !important; max-width: min(75vw, 100%) !important; min-width: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-sizing: border-box !important; } #chat-page .chat-message .chat-message-bubble.chat-message-bubble--redpacket:not(#lovemi-rp):not(#lovemi-rp):not(#lovemi-rp)::before, #chat-page .chat-message .chat-message-bubble.chat-message-bubble--redpacket:not(#lovemi-rp):not(#lovemi-rp):not(#lovemi-rp)::after { content: none !important; display: none !important; } #chat-page .chat-message .chat-message-bubble.chat-message-bubble--redpacket:not(#lovemi-rp):not(#lovemi-rp):not(#lovemi-rp) .chat-redpacket-bubble { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #chat-page .chat-message-bubble.chat-message-bubble--transfer::before, #chat-page .chat-message-bubble.chat-message-bubble--transfer::after { content: none !important; display: none !important; } .chat-transfer-bubble { isolation: isolate; -webkit-transform: translateZ(0); transform: translateZ(0); } .chat-transfer-bubble::after { z-index: 0 !important; } .chat-transfer-card-head, .chat-transfer-body, .chat-transfer-note, .chat-transfer-actions { z-index: 1; } .chat-transfer-amount { position: relative; z-index: 2; text-shadow: none !important; -webkit-text-stroke: 0 transparent; } .chat-transfer-status { position: relative; z-index: 2; display: block; width: 100%; margin-top: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; text-decoration: none !important; } /* 旧 WebKit 不支持 :has() 时，普通气泡换行规则可能因选择器无效而整体失效； 此处用显式类名兜底，确保转账卡片内部排版不被外层 flex/inline-block 干扰。 */ @supports not selector(:has(*)) { #chat-page .chat-message-bubble.chat-message-bubble--transfer, #chat-page .chat-message-bubble.chat-message-bubble--transfer .chat-transfer-bubble, #chat-page .chat-message-bubble.chat-message-bubble--redpacket, #chat-page .chat-message-bubble.chat-message-bubble--redpacket .chat-redpacket-bubble { display: block !important; } } /* ------------------------------------------------------------------ */ /* 10) 线下聊天模式（私聊：消息模式 / 长文模式）真机阅读优化 */ /* */ /* 用户反馈（2026-05-23）： */ /* - vivo X200 + Chrome、OPPO + Via 等机型上，线下聊天模式下 */ /* Char/User 的气泡内容没有铺满屏幕，反而出现两侧大量空白、 */ /* 文本看似居中对齐； */ /* - 长文模式没有长短段落区分，阅读体验差。 */ /* */ /* 根因（综合排查）： */ /* - style.css 基础 .chat-message-bubble 是 display:inline-flex + */ /* width:fit-content + max-width:80%； */ /* 在偏好"自适应内容"的 Chromium 内核（vivo / OPPO Via / */ /* 三星 / 华为 / 小米 Chrome）上，即使 #chat-page.offline-mode */ /* 下用 width:100% / max-width:100% 覆盖，inline-flex 也会按内容 */ /* 宽度计算，最终把气泡压成 60-75% 的窄柱、文字落到屏幕中段； */ /* - mobile-real-device-fix.css 原来的 @media(max-width:360px) */ /* `#chat-page .chat-message-bubble { max-width:74% !important }`*/ /* 在窄屏会进一步压制线下气泡（已在上方第 4 节做了 :not() 排除）。*/ /* */ /* 作用范围：仅「私聊」线下分支（chat-page--offline-single / 私聊 */ /* 归档），不影响多人群组线下（chat-page--offline-group 有它自己 */ /* 的"独立小气泡"样式，需要保持窄气泡以模拟群聊里每个成员的发言）。*/ /* 适配机型/浏览器：iPhone Safari、华为/小米/OPPO/魅族/vivo/三星 */ /* 主流移动浏览器（Chrome / Via / Edge / 搜狗 / 雨见 / 夸克 / QQ /UC 等）。*/ /* ------------------------------------------------------------------ */ /* 1) 私聊线下：chat-message-content 100% 宽，对抗某些 Chromium 把 flex:1 1 0% 算成 0、再加上 align-items:stretch 失效的情况 */ #chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-content, #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-content { width: 100% !important; max-width: none !important; flex: 1 1 auto !important; min-width: 0 !important; box-sizing: border-box !important; align-self: stretch !important; } /* 2) 私聊线下：所有线下气泡变体强制 block + 100% 宽 + 左对齐 */ #chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-bubble--offline, #chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-bubble--offline-longform, #chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-bubble--offline-rich, #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-bubble--offline, #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-bubble--offline-longform, #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-bubble--offline-rich { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; text-align: left !important; align-self: stretch !important; margin-left: 0 !important; margin-right: 0 !important; } /* 3) 私聊线下：气泡内的段落容器（叙事 / 对白 / 旁白）也强制 block 100% */ #chat-page.chat-page--offline-single .chat-message-bubble--offline .chat-message-segment, #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message-bubble--offline .chat-message-segment { display: block !important; width: 100% !important; max-width: 100% !important; text-align: left !important; box-sizing: border-box !important; } /* 4) 极窄屏（<=380px，覆盖 iPhone SE2 / 安卓 360-380dp 主流尺寸）： 私聊线下 chat-content 把两侧 padding 从 14px 收到 8px，给阅读多挤 12px； */ @media (max-width: 380px) { #chat-page.chat-page--offline-single .chat-content, #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-content { padding-left: 8px !important; padding-right: 8px !important; } /* 同样把私聊线下气泡自身的 padding 从 8px 6px 收到 6px 4px，进一步给文字让位 */ #chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-bubble, #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-bubble { padding-left: 4px !important; padding-right: 4px !important; } } /* 5) 中等屏（381-420px，主流 6.1"-6.7" 手机如 iPhone 14/15、vivo X200、 华为 Mate 60、OPPO Find、小米 14、三星 S24 等）：保留默认 padding， 仅再次显式宣告气泡 100% 宽，对抗个别浏览器把 flex 算成 fit-content */ @media (min-width: 361px) and (max-width: 420px) { #chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-bubble--offline, #chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-bubble--offline-longform, #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-bubble--offline, #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-bubble--offline-longform { width: 100% !important; max-width: 100% !important; } } /* 6) 老 WebKit / 不支持 :has() 的 UA（雨见 / 旧 Via / 部分国产 WebView）兜底： 单独列出私聊线下，display:block 兜底确保不会回退到 inline 行为。 注：不包含群组线下分支（保留群组自有的窄气泡样式）。 */ @supports not selector(:has(*)) { #chat-page.chat-page--offline-single .chat-message-bubble.chat-message-bubble--offline, #chat-page.chat-page--offline-single .chat-message-bubble.chat-message-bubble--offline-longform, #chat-page.chat-page--offline-single .chat-message-bubble.chat-message-bubble--offline-rich { display: block !important; width: 100% !important; max-width: 100% !important; text-align: left !important; box-sizing: border-box !important; } } /* ------------------------------------------------------------------ */ /* 11) 线下模式美化弹窗：移动端真实视口 + 可触摸滚动 */ /* */ /* 三星 / vivo 等 Android Chrome 以及部分国产浏览器在地址栏显示、 */ /* textarea 自动聚焦或视口高度变化时，容易把弹窗正文压到可视区外。 */ /* 这里让正文成为唯一纵向滚动区，并限制 JSON 输入框高度，确保 */ /* 聊天背景、气泡调色、导入/方案/清空、保存按钮都能触达。 */ /* ------------------------------------------------------------------ */ #chat-page .chat-offline-modals-layer .offline-beautify-content { min-height: 0 !important; height: 100% !important; max-height: 100% !important; } #chat-page .chat-offline-modals-layer .offline-beautify-body { overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding-bottom: max(14px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) !important; } #chat-page .chat-offline-modals-layer .offline-beautify-textarea { flex: 0 0 auto !important; height: clamp(132px, 30svh, 270px) !important; min-height: 132px !important; max-height: 270px !important; overflow: auto !important; -webkit-overflow-scrolling: touch; } @supports not (height: 1svh) { #chat-page .chat-offline-modals-layer .offline-beautify-textarea { height: clamp(132px, 30vh, 270px) !important; } } @media (max-height: 720px), (max-width: 380px) { #chat-page .chat-offline-modals-layer .offline-beautify-body { padding: 10px 12px max(12px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) !important; } #chat-page .chat-offline-modals-layer .offline-beautify-hint { margin-bottom: 8px !important; line-height: 1.4 !important; } #chat-page .chat-offline-modals-layer .offline-beautify-bg-card { grid-template-columns: minmax(0, 1fr) auto 46px !important; gap: 8px !important; padding: 8px !important; } #chat-page .chat-offline-modals-layer .offline-beautify-bg-main, #chat-page .chat-offline-modals-layer .offline-beautify-bg-clear, #chat-page .chat-offline-modals-layer .offline-beautify-bg-thumb { min-height: 42px !important; height: 42px !important; } #chat-page .chat-offline-modals-layer .offline-beautify-bg-thumb { width: 46px !important; } #chat-page .chat-offline-modals-layer .offline-bubble-tone-card { padding: 8px !important; } #chat-page .chat-offline-modals-layer .offline-bubble-tone-grid { gap: 6px !important; } #chat-page .chat-offline-modals-layer .offline-bubble-tone-option { gap: 5px !important; padding: 7px !important; } #chat-page .chat-offline-modals-layer .offline-beautify-textarea { height: clamp(120px, 26svh, 210px) !important; min-height: 120px !important; } #chat-page .chat-offline-modals-layer .offline-beautify-actions { gap: 6px !important; margin-top: 8px !important; } } /* ------------------------------------------------------------------ */ /* 12) 微信聊天多选栏：防止取消按钮点击穿透到底部「接收」按钮 */ /* */ /* mobile-real-device-fix.css 上方为了修复键盘残留，曾强制让 */ /* .chat-bottom-composer / .chat-input-area 在非键盘态 display:flex。*/ /* 多选模式下这会覆盖 JS 的 display:none，导致 vivo Chrome 等手机 */ /* 点击「取消」时下层接收按钮仍在可点击区域，出现"没有可接收内容"。*/ /* ------------------------------------------------------------------ */ #chat-page.chat-page--multiselect-mode .chat-bottom-composer, #chat-page.chat-page--multiselect-mode .chat-input-area, body:not([data-mobile-keyboard-open="1"]) #chat-page.chat-page--multiselect-mode .chat-bottom-composer, body:not([data-mobile-keyboard-open="1"]) #chat-page.chat-page--multiselect-mode .chat-input-area, body.ios-fullscreen-mode:not([data-mobile-keyboard-open="1"]) #chat-page.chat-page--multiselect-mode .chat-bottom-composer, body.ios-fullscreen-mode:not([data-mobile-keyboard-open="1"]) #chat-page.chat-page--multiselect-mode .chat-input-area { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } #chat-page.chat-page--multiselect-mode .chat-multiselect-bar { z-index: 1200 !important; pointer-events: auto !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* ------------------------------------------------------------------ */ /* 12.1) 多选操作栏「被强制全屏的小手机屏幕截断、点不到删除键」修复 */ /* */ /* 用户反馈：iPhone 14 Pro Max + Safari 强制全屏后，在微信聊天里 */ /* 长按气泡→多选，底部多选操作栏（含「删除」）会被屏幕底部截断， */ /* 无法点到删除键。 */ /* */ /* 根因：原 .chat-multiselect-bar 为 position:absolute; bottom:0， */ /* 其包含块是 #chat-page。强制全屏（含 iOS 模拟全屏）时 #chat-page */ /* 的实测高度可能略大于真实可见区（Safari 工具栏/手势条参与计算）， */ /* 于是 bottom:0 落在可见区之外，整条栏（尤其右侧「删除」）被裁掉。 */ /* */ /* 修复：多选模式下让操作栏回到正常 flex 流（position:static）， */ /* 紧跟在 flex:1 的聊天内容之后、占据被隐藏的输入栏位置，由 flex */ /* 布局保证它始终落在可见列的最底部、整条可见可点。此法不依赖任何 */ /* 机型/浏览器对 dvh / 可见高度的精确计算，iPhone/华为/小米/OPPO/ */ /* 魅族/vivo/三星 + Safari/Via/Chrome/Edge/搜狗/雨见/夸克 一致生效。 */ /* ------------------------------------------------------------------ */ #chat-page.chat-page--multiselect-mode .chat-multiselect-bar.show { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; /* 始终为底部安全区（home 指示条）留出空间，避免按钮压在手势条下 */ padding-bottom: calc(8px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) !important; } /* 多选模式下聊天内容区可压缩，给操作栏让出底部空间 */ #chat-page.chat-page--multiselect-mode .chat-content { flex: 1 1 auto !important; min-height: 0 !important; } #chat-page.chat-page--multiselect-mode .chat-multiselect-bar .multiselect-btn { pointer-events: auto !important; touch-action: manipulation; -webkit-user-select: none; user-select: none; } /* ------------------------------------------------------------------ */ /* 13) 弹窗 + 虚拟键盘：防止 Chrome / Edge / 小米 / 华为 / OPPO 等 */ /* Chromium 内核在强制全屏下 autofill 条（钥匙/银行卡/地址）悬浮错位 */ /* */ /* JS（mobile-real-device-fix.js v1.0.6）在键盘弹起时写入 */ /* --lovemi-vv-offset-top / --lovemi-vv-height 等 visualViewport */ /* 实测值；此处让 .modal.show 贴合真实可视区，内容区内部滚动。 */ /* ------------------------------------------------------------------ */ body[data-mobile-keyboard-open="1"] .modal.show { align-items: flex-start !important; justify-content: center !important; overflow: hidden !important; overscroll-behavior: contain; -webkit-overflow-scrolling: auto; top: var(--lovemi-vv-offset-top, 0px) !important; left: var(--lovemi-vv-offset-left, 0px) !important; width: var(--lovemi-vv-width, 100%) !important; height: var(--lovemi-vv-height, 100%) !important; max-height: var(--lovemi-vv-height, 100%) !important; padding-top: max(10px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding-bottom: max(8px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); box-sizing: border-box; } body[data-mobile-keyboard-open="1"] .modal.show .modal-content { flex: 0 1 auto; width: min(92vw, 400px) !important; max-width: min(92vw, 400px) !important; max-height: calc( var(--lovemi-vv-height, 100vh) - max(10px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) - max(8px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) - 16px ) !important; margin: 0 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ------------------------------------------------------------------ */ /* 13b) 世界书「贴合小手机屏」弹窗：禁止套用上方「居中卡片」键盘压缩 */ /* */ /* 用户反馈（iPhone 17 + Safari/Chrome）：编辑世界书时键盘弹起后， */ /* 取消/保存按钮漂在弹窗中段，正文区被裁切，键盘上方大块空白。 */ /* */ /* 根因：#add-world-book-modal.add-world-book-modal--phone 是 #app 内 */ /* absolute 铺满 + 内层卡片四边 8px 内嵌的「操作页」，不是居中小卡片； */ /* 第 13 节通用规则把 .modal-content 强行改成 min(92vw,400px) + */ /* max-height 居中卡片，破坏了 flex 头/身/尾布局。 */ /* */ /* 修复：键盘态仍用 visualViewport 把壳钉在键盘上方可视区，但恢复内层 */ /* 卡片的 absolute inset:8px 铺满，让 footer 贴在卡片底（键盘上方）。 */ /* iPhone/华为/小米/OPPO/魅族/vivo/三星 + Safari/Via/Chrome/Edge/ */ /* 搜狗/雨见/夸克 一致；无键盘时本规则不生效，观感零变化。 */ /* ------------------------------------------------------------------ */ body[data-mobile-keyboard-open="1"] #add-world-book-modal.add-world-book-modal--phone.modal.show { align-items: stretch !important; justify-content: stretch !important; overflow: hidden !important; overscroll-behavior: contain; top: var(--lovemi-vv-offset-top, 0px) !important; left: 0 !important; right: 0 !important; width: 100% !important; height: var(--lovemi-vv-height, 100%) !important; max-height: var(--lovemi-vv-height, 100%) !important; padding: 0 !important; box-sizing: border-box !important; } body[data-mobile-keyboard-open="1"] #add-world-book-modal.add-world-book-modal--phone.modal.show .modal-content, body[data-mobile-keyboard-open="1"] #add-world-book-modal.add-world-book-modal--phone.modal.show .add-world-book-modal-content { position: absolute !important; left: 8px !important; right: 8px !important; top: 8px !important; bottom: 8px !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; flex: none !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } body[data-mobile-keyboard-open="1"] #add-world-book-modal.add-world-book-modal--phone.modal.show .modal-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } body[data-mobile-keyboard-open="1"] #add-world-book-modal.add-world-book-modal--phone.modal.show .modal-header, body[data-mobile-keyboard-open="1"] #add-world-book-modal.add-world-book-modal--phone.modal.show .modal-footer { flex: 0 0 auto !important; } body[data-mobile-keyboard-open="1"] #add-world-book-modal.add-world-book-modal--phone input:focus, body[data-mobile-keyboard-open="1"] #add-world-book-modal.add-world-book-modal--phone textarea:focus { scroll-margin-top: 12px; scroll-margin-bottom: 12px; } /* ------------------------------------------------------------------ */ /* 13c) ②号子屏幕「吃了么」独立全屏 App：禁止套用上方「居中卡片」键盘压缩 */ /* */ /* 用户反馈（安卓 APK / E:\lovemi-android 打包版）：在「吃了么」里点搜索 */ /* 框唤起输入法后，整个外卖界面被挤到屏幕左上角一小块，露出下面的②号 */ /* 子屏幕。 */ /* */ /* 根因（两处叠加，缺一不可）： */ /* sub-screen-2-takeaway.css 的 body.ss2tk-app 把这三个弹窗做成「与 */ /* #app 等宽居中的全屏 App」——靠 left:50% + transform:translateX(-50%) */ /* 居中，且不带 !important。键盘弹起后第 13 节通用规则以 !important */ /* 改写 left（→ --lovemi-vv-offset-left，手机上恒为 0px），但 */ /* transform 不在改写清单里、被完整保留；于是 left:0 再叠加一次 */ /* translateX(-50%)，整个壳向左平移了半个屏宽——左半屏移出可视区，这 */ /* 就是「挤到角落 + 左边文字被切掉」。同时 .modal-content 被强制成 */ /* min(92vw,400px) + max-height 居中小卡片 + overflow-y:auto，全屏 */ /* App 的 头/搜索区/店铺列表 三段 flex 布局被打散、卡片缩到顶部， */ /* 于是右侧与下方整片露出②号子屏幕。 */ /* */ /* 修复：键盘态保留它原本的「等宽居中」横向几何（left:50% 与 */ /* translateX(-50%) 成对保留，不再半屏偏移），只把纵向收进 */ /* visualViewport 可视区；内层面板恢复铺满 + 三段 flex，滚动交给店铺列表。*/ /* 无 visualViewport 的老内核（部分 360 / 搜狗 / UC 旧版）走 var() */ /* 兜底值，等价于原全屏几何，只是键盘盖住底部，不会错位。 */ /* iPhone/华为/荣耀/小米/OPPO/vivo/魅族/三星/一加 + Safari/Chrome/Edge/ */ /* Via/雨见/永恒/搜狗/360/夸克 一致生效；无键盘时本节不参与，观感零变化。 */ /* */ /* 注意：选择器必须逐个写死这三个「全屏浏览态」弹窗 ID。 */ /* #ss2-takeaway-friend-modal 的内层也带 .takeaway-menu-modal-content， */ /* 但它是居中小卡片（sub-screen-2-takeaway.css 第 194 行起），不能被本 */ /* 节的「铺满」规则命中，所以不可以简写成后代选择器。 */ /* ------------------------------------------------------------------ */ body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-menu-modal.modal.show, body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-shop-detail-modal.modal.show, body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-cart-modal.modal.show { /* 横向：保持与 #app 等宽居中；left 与 transform 必须成对出现 */ left: calc(50% + var(--lovemi-vv-offset-left, 0px)) !important; right: auto !important; transform: translateX(-50%) !important; width: 100% !important; max-width: 480px !important; /* 纵向：钉进键盘上方的真实可视区 */ top: var(--lovemi-vv-offset-top, 0px) !important; height: var(--lovemi-vv-height, 100%) !important; max-height: var(--lovemi-vv-height, 100%) !important; /* 全屏 App：内层铺满而非居中小卡片 */ align-items: stretch !important; justify-content: stretch !important; padding: 0 !important; overflow: hidden !important; overscroll-behavior: contain; box-sizing: border-box !important; } body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-menu-modal.modal.show .takeaway-menu-modal-content, body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-shop-detail-modal.modal.show .takeaway-menu-modal-content, body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-cart-modal.modal.show .takeaway-menu-modal-content { width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; margin: 0 !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; /* 整卡不滚动，否则顶栏（含关闭按钮）会被滚出可视区 */ overflow: hidden !important; border-radius: 0 !important; box-sizing: border-box !important; } /* 顶栏固定；顶栏自带 env(safe-area-inset-top)，故上面壳的 padding 可归零 */ body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-menu-modal.modal.show .wallet-modal-header, body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-shop-detail-modal.modal.show .wallet-modal-header, body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-cart-modal.modal.show .wallet-modal-header { flex: 0 0 auto !important; } body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-menu-modal.modal.show .takeaway-menu-body, body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-shop-detail-modal.modal.show .takeaway-menu-body, body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-cart-modal.modal.show .takeaway-menu-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } /* 真正的滚动容器：店铺列表。键盘占掉大半屏时仍可翻店铺 */ body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-menu-modal.modal.show .takeaway-shops-list, body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-shop-detail-modal.modal.show .takeaway-shops-list, body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-cart-modal.modal.show .takeaway-shops-list { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* 矮屏（键盘占掉大半屏）时标签墙自身可滚，保证搜索框与店铺列表都不被挤没。 标签墙收起态用的是 display:none（sub-screen-2-takeaway.css 第 269 行）， 不受这里的 max-height 影响，折叠交互照旧。 */ body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-menu-modal.modal.show .takeaway-tags-grid { max-height: 30vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-menu-modal.modal.show .takeaway-search-input:focus { scroll-margin-top: 12px; scroll-margin-bottom: 12px; } /* 平板 / 折叠屏展开态（iPad、华为 Mate X、三星 Fold 等）：保留原 20px 内嵌观感 */ @media (min-width: 481px) { body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-menu-modal.modal.show, body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-shop-detail-modal.modal.show, body.ss2tk-app[data-mobile-keyboard-open="1"] #takeaway-cart-modal.modal.show { top: calc(var(--lovemi-vv-offset-top, 0px) + 20px) !important; height: calc(var(--lovemi-vv-height, 100%) - 40px) !important; max-height: calc(var(--lovemi-vv-height, 100%) - 40px) !important; } } /* 主卡片「编辑文字素材」：无键盘时也贴顶留白，避免与灵动岛 / 状态栏重叠 */ #edit-modal.modal.show { align-items: flex-start; justify-content: center; padding-top: max(48px, calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 20px)); padding-bottom: max(16px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); box-sizing: border-box; } #edit-modal.modal.show .edit-modal-content { max-height: min( 78vh, calc(100% - max(48px, calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 20px)) - max(16px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) - 12px) ); display: flex; flex-direction: column; overflow: hidden; } #edit-modal.modal.show .edit-modal-content .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } #edit-modal .edit-modal-form { display: block; margin: 0; padding: 0; } body[data-mobile-keyboard-open="1"] #edit-modal input:focus, body[data-mobile-keyboard-open="1"] #edit-modal textarea:focus { scroll-margin-top: 12px; scroll-margin-bottom: 12px; } /* iOS 模拟全屏 + 标准 :fullscreen 双路径一致 */ body.ios-fullscreen-mode[data-mobile-keyboard-open="1"] .modal.show, :fullscreen body[data-mobile-keyboard-open="1"] .modal.show, :-webkit-full-screen body[data-mobile-keyboard-open="1"] .modal.show { z-index: 10050 !important; } /* ------------------------------------------------------------------ */ /* 13d) 微信「查找聊天记录」全屏磨砂层：键盘期禁止套用「居中卡片」规则， */ /* 并在整个输入法会话期摘掉 backdrop-filter */ /* */ /* 用户反馈（小米 12 徕卡版 + E:\lovemi-android 打包 APK）：聊天设置 → */ /* 查找聊天记录，点输入框、输入法升起的瞬间整个界面卡死，只能强杀重开。 */ /* */ /* #search-chat-modal 是 #chat-page 内 absolute 铺满、约 90% 实色 + */ /* 15px backdrop-filter 的整页操作层，它下面是完整的聊天窗口（成百上千 */ /* 条气泡、头像、图片）。键盘升起时 APK WebView（adjustResize）逐帧缩 */ /* 小 —— 每一帧合成器都要把整个聊天页重新光栅化一遍再做 15px 模糊； */ /* 第 13 节的通用规则又在同一刻把 .modal-content 改成 overflow-y:auto */ /* 的滚动容器，backdrop-filter 滚动容器在 Chromium 里会退回主线程逐帧 */ /* 重绘。两者叠加在 Adreno + MIUI WebView 上就是「键盘升起即冻屏」。 */ /* */ /* 修复： */ /* 1) 输入法会话期（html[data-lovemi-ime-session] 在 focusin 同步 */ /* 写入，早于键盘第一帧）关掉模糊，底色提到 97% 实色，观感几乎无差； */ /* 2) 键盘期保持原有 flex 头 / 身布局与 0 内边距（通用规则的 10px / */ /* 8px 内边距会让透明壳露出一圈底层聊天页），不再套 max-height 与 */ /* overflow-y:auto。 */ /* 无键盘时本节不生效，桌面 / iOS 观感零变化。 */ /* ------------------------------------------------------------------ */ html[data-lovemi-ime-session="1"] #chat-page #search-chat-modal.search-chat-fullscreen .modal-content.search-chat-modal, body[data-lovemi-ime-session="1"] #chat-page #search-chat-modal.search-chat-fullscreen .modal-content.search-chat-modal, body[data-mobile-keyboard-open="1"] #chat-page #search-chat-modal.search-chat-fullscreen .modal-content.search-chat-modal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(245, 246, 248, 0.97) !important; } /* 同一机制的推广：聊天页内所有全屏磨砂层（聊天设置 / 好友设置 / 群设置 / 专属美化等， 其中好友设置的昵称、人设输入框同样会唤起键盘，设置层还是 22px blur + saturate） 在输入法会话期一律摘掉 backdrop-filter。这些层的底色本就 ≥ 80% 实色，模糊消失后 只是底下聊天页的轮廓略清晰一点；键盘收起（会话结束）后模糊自动恢复。 */ html[data-lovemi-ime-session="1"] #chat-page .chat-fullscreen-glass .modal-content, body[data-lovemi-ime-session="1"] #chat-page .chat-fullscreen-glass .modal-content, body[data-mobile-keyboard-open="1"] #chat-page .chat-fullscreen-glass .modal-content { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body[data-mobile-keyboard-open="1"] #chat-page #search-chat-modal.search-chat-fullscreen.modal.show { align-items: stretch !important; justify-content: stretch !important; left: 0 !important; right: 0 !important; width: 100% !important; padding: 0 !important; box-sizing: border-box !important; } body[data-mobile-keyboard-open="1"] #chat-page #search-chat-modal.search-chat-fullscreen.modal.show .modal-content.search-chat-modal { width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } body[data-mobile-keyboard-open="1"] #chat-page #search-chat-modal.search-chat-fullscreen.modal.show .search-chat-modal-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } body[data-mobile-keyboard-open="1"] #chat-page #search-chat-modal.search-chat-fullscreen.modal.show .search-results { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ------------------------------------------------------------------ */ /* 14) 聊天窗口闪屏兼容（flat-glass） */ /* */ /* 用户反馈：华为 麦芒11 + Edge（Mali GPU + Chromium 合成器）在微信聊天 */ /* 页互动时屏幕反复闪烁，退出聊天页其余功能正常。 */ /* */ /* 根因：聊天页里同时存在大量 backdrop-filter: blur() 图层—— */ /* - 每一条消息气泡 .chat-message-bubble（双方都有，会话里可达数十个）*/ /* - 底部输入栏 .chat-input-area / 功能键 .chat-function-btn */ /* - 开启微信全局背景图时的 .chat-header */ /* 这些毛玻璃层叠加在「带背景图、持续滚动」的 .chat-content 之上， */ /* 华为/部分安卓浏览器内核在滚动 / 收发消息触发重绘时，需要对每个模糊层 */ /* 逐帧重新采样背后位图，GPU 合成与栅格化抢帧 → 整屏闪烁、刺眼。 */ /* iOS Safari 对 backdrop-filter 合成稳定，所以 iPhone 不复现。 */ /* */ /* 方案：仅在易闪屏环境（安卓 / 鸿蒙 / 不支持 backdrop-filter 的浏览器，*/ /* 由 index.html 头部内联脚本打 html.lovemi-chat-flat-glass 标记）下， */ /* 把聊天窗口内的毛玻璃整体降级为「半透明实色」——视觉几乎一致、文字更 */ /* 清晰，且彻底消除逐帧重采样导致的闪屏。iPhone / 桌面端保留毛玻璃观感。*/ /* */ /* 安全约束： */ /* - 只作用于 #chat-page 内部，不影响其它页面的玻璃拟态。 */ /* - backdrop-filter 纯属视觉特效，移除绝不破坏任何聊天功能逻辑。 */ /* - 背景实色用更高特异性 / !important 兜底可读性，但不强行覆盖用户 */ /* 在「微信-设置」里自定义的气泡底色（仅去掉模糊、保留其底色）。 */ /* ------------------------------------------------------------------ */ /* (a) 兜底全清：聊天页内所有元素一律关闭 backdrop-filter，杜绝任何残留 毛玻璃层在滚动 / 收发消息时逐帧重采样。这是消除闪屏的关键一步。 */ html.lovemi-chat-flat-glass #chat-page, html.lovemi-chat-flat-glass #chat-page * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* (b) 底部输入栏：去模糊后把半透明底色调实，保持「贴底毛玻璃栏」观感与 输入区文字对比度（原 rgba(191,189,195,0.45) 依赖模糊才显磨砂）。 */ html.lovemi-chat-flat-glass #chat-page .chat-input-area { background-color: rgba(236, 235, 239, 0.94) !important; } /* (c) 输入栏左右功能键（表情 / 更多 / @）：实色白底，去模糊不发虚。 */ html.lovemi-chat-flat-glass #chat-page .chat-function-btn { background-color: rgba(255, 255, 255, 0.96) !important; } /* (d) 开启微信全局背景图时的聊天头部：去模糊后调实，避免标题/返回键发虚。 */ html.lovemi-chat-flat-glass.wechat-global-bg-on #chat-page .chat-header { background-color: rgba(247, 247, 247, 0.96) !important; } /* (e) 心跳监控 / TA想 下拉玻璃面板：去模糊后实色，保证文字可读。 */ html.lovemi-chat-flat-glass #chat-page .chat-heartbeat-monitor-glass, html.lovemi-chat-flat-glass #chat-page .chat-heartbeat-monitor-panel { background-color: rgba(255, 255, 255, 0.97) !important; } /* 注：消息气泡默认底色 rgba(232,239,245,0.7) 去模糊后仍是清爽的半透明 浅蓝，文字可读、观感接近，故此处不改其底色——既消除闪屏，又完整保留 用户在「微信-设置」中对气泡底色的自定义（不被 !important 强行覆盖）。 */ /* ------------------------------------------------------------------ */ /* 15) #app 内 absolute overlay（真心话 / 一起听歌）软键盘轻量避让 */ /* 配合 overlay-keyboard-compat-guard.js：只加底垫 + 保证文字可见， */ /* 不对壳做 top/height/transform 强制定位（避免 OPPO Edge 整屏空白）。*/ /* ------------------------------------------------------------------ */ body[data-lovemi-overlay-kb="1"] #truth-or-dare-game.lovemi-overlay-kb-active, body[data-lovemi-overlay-kb="1"] #draw-guess-game.lovemi-overlay-kb-active, body[data-lovemi-overlay-kb="1"] #listen-together-overlay.lovemi-overlay-kb-active { box-sizing: border-box !important; } /* 真心话 / 你画我猜壳层 absolute：用 bottom 收紧；一起听歌 flex 壳用 padding-bottom */ body[data-lovemi-overlay-kb="1"] #truth-or-dare-game .tod-shell.lovemi-overlay-kb-active, body[data-lovemi-overlay-kb="1"] #draw-guess-game .dg-shell.lovemi-overlay-kb-active { box-sizing: border-box !important; bottom: var(--lovemi-overlay-kb-inset, 0px) !important; padding-bottom: 0 !important; } body[data-lovemi-overlay-kb="1"] #listen-together-overlay.lovemi-overlay-kb-active { padding-bottom: var(--lovemi-overlay-kb-inset, 0px) !important; } /* 键盘态：输入框文字/光标强制可见（Edge Android 偶发「打了字看不见」） */ body[data-lovemi-overlay-kb="1"] #truth-or-dare-game textarea:focus, body[data-lovemi-overlay-kb="1"] #truth-or-dare-game input:focus, body[data-lovemi-overlay-kb="1"] #draw-guess-game textarea:focus, body[data-lovemi-overlay-kb="1"] #draw-guess-game input:focus, body[data-lovemi-overlay-kb="1"] #listen-together-overlay textarea:focus, body[data-lovemi-overlay-kb="1"] #listen-together-overlay input:focus { opacity: 1 !important; -webkit-text-fill-color: currentColor !important; caret-color: auto !important; scroll-margin-bottom: calc(12px + var(--lovemi-overlay-kb-inset, 0px)) !important; } body[data-lovemi-overlay-kb="1"] #truth-or-dare-game .tod-input-field:focus, body[data-lovemi-overlay-kb="1"] #truth-or-dare-game .tod-compose-field textarea:focus, body[data-lovemi-overlay-kb="1"] #truth-or-dare-game .tod-compose-card textarea:focus { color: #e8dcc0 !important; background: rgba(10, 8, 16, 0.92) !important; } body[data-lovemi-overlay-kb="1"] #listen-together-overlay .lt-comment-zone__textarea:focus, body[data-lovemi-overlay-kb="1"] #listen-together-overlay .lt-share-compose__text:focus, body[data-lovemi-overlay-kb="1"] #listen-together-overlay .lt-search__input:focus, body[data-lovemi-overlay-kb="1"] #listen-together-overlay .lt-lrc-editor__textarea:focus, body[data-lovemi-overlay-kb="1"] #listen-together-overlay .lt-pl-editor-input:focus { color: var(--lt-ink, #2d2a2c) !important; background: rgba(255, 255, 255, 0.96) !important; } /* overlay 键盘态同样关掉 #app 的 translateZ，减少合成层错位 */ body[data-lovemi-overlay-kb="1"] #app, body[data-lovemi-overlay-kb="1"] .phone-container { -webkit-transform: none !important; transform: none !important; } /* ------------------------------------------------------------------ */ /* 15) 移动端输入框字号兜底（≥16px）—— 防止 iOS / 部分国产浏览器聚焦缩放 */ /* */ /* 用户反馈：编辑世界书 / 各类文本框时，文字突然变大、框架抖动一下。 */ /* */ /* 根因：iOS Safari（及同内核的 Chrome iOS / Edge iOS / 夸克等）在聚焦 */ /* font-size < 16px 的 input/textarea/select 时会自动放大页面，使文字 */ /* 可读；放大/回缩与软键盘动画叠在一起，表现为「框架抖动 + 字突然变大」。*/ /* 页面虽已 user-scalable=no / maximum-scale=1，自 iOS 10 起多数版本仍 */ /* 会执行该自动缩放；唯一可靠解法是可编辑控件 computed font-size ≥16px。*/ /* */ /* 本项目顶部虽有 input{font-size:16px}，但 .form-input / .setting-input */ /* / 各模块更具体的规则常写回 14px/15px，把保护覆盖掉。这里用后加载的 */ /* !important 兜底，覆盖各模块遗漏的 <16px 规则；桌面宽屏同规则无害。 */ /* 不含 checkbox/radio/file/button 等不会唤起软键盘的类型。 */ /* ------------------------------------------------------------------ */ input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], textarea, select { font-size: 16px !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } input:not([type]):focus, input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, textarea:focus, select:focus { font-size: 16px !important; } /* ------------------------------------------------------------------ */ /* 16) 系统级字体放大（Android 字体缩放 / WebView Text Autosizer）排版保护 */ /* */ /* 用户反馈（2026-08，iQOO Neo9S Pro+ / OriginOS 6 / APK）： */ /* 微信聊天气泡异常换行——「小骗子。」被渲染成「小骗 / 子。」， */ /* 每条消息都在「最后一个字＋句末标点」前断行，气泡比内容窄一小截。 */ /* */ /* 根因：用户在系统设置里调大了「字体大小」。Android WebView（以及部分 */ /* 国产浏览器：雨见 / Via / 搜狗 / 360 / 夸克的"字体缩放"设置）默认跟随 */ /* 系统缩放放大页面所有文字，且这种放大走 Blink 的 Text Autosizer—— */ /* 按文本块「后期膨胀」，不参与 width:fit-content / max-content 等固有 */ /* 宽度计算。聊天气泡按未放大的字体测宽、文字按放大后的字体渲染， */ /* 内容放不下；句末中文标点受避头尾规则约束不能落在行首，就拖着前一个 */ /* 字一起掉到第二行。系统字体保持默认的用户（含所有 iPhone 用户）不复现。 */ /* */ /* 方案：text-size-adjust 是非继承属性，Text Autosizer 逐块检查——只写 */ /* 在 html 上罩不住气泡（style.css 顶部的 -webkit-text-size-adjust:100% */ /* 正因如此没能防住），必须铺到每一个元素。声明为 100% 后 Autosizer 对 */ /* 该元素使用「指定字号 × 100%」，膨胀被关闭，测宽与渲染重新一致。 */ /* iOS Safari 上等价于既有的 html 级 100%（阻止横屏自动放大文字）， */ /* 桌面端与不支持的内核自动忽略，均无副作用。 */ /* App 内文字大小仍由网页端自己的「字体设置」控制。 */ /* （APK 侧同时已在 MainActivity 锁定 setTextZoom(100)，本节是对 */ /* 已安装旧版 APK 的用户与安卓浏览器用户的远程兜底。） */ /* ------------------------------------------------------------------ */ html, body, body * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }