媒体查询无法响应软键盘弹起，因其仅在窗口尺寸真实变化时触发，而iOS软键盘为覆盖层不改变视口，Android高度变化短暂不可靠；必须用JavaScript检测（visualViewport优先）+class切换控制样式。
媒体查询本身无法直接响应软键盘弹起——它只在页面加载或浏览器窗口尺寸真正变化时生效，而软键盘弹起在 iOS 上不触发 window.resize，也不改变 CSS 媒体查询所依赖的视口宽度/高度断点（如 min-height: 600px）。所以，**不能靠 @media 规则实时适配键盘状态**，必须结合 JavaScript 动态判断+CSS 控制。
为什么媒体查询在这里失效
– iOS Safari 中软键盘是“覆盖层”，window.innerHeight 和 document.documentElement.clientHeight 基本不变，媒体查询检测不到变化；
– Android 虽会缩小 window.innerHeight，但该变化短暂、不可靠，且媒体查询无法监听运行时 height 的连续变动；
– vh 单位在键盘弹起后仍按原始视口计算，导致布局错位，而媒体查询对 vh 的“误算”毫无感知。
替代方案：用 JS 检测 + class 切换驱动样式
核心思路是：用 JavaScript 判断键盘是否打开，给 或 添加临时 class（如 keyboard-open），再用 CSS 类选择器覆盖布局。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 监听依据分平台：
- iOS：监听
focusin/focusout，配合visualViewport?.height变化（iOS 13+ 支持） - Android：监听
resize，对比document.documentElement.clientHeight前后差值（通常下降 200px 以上）
- iOS：监听
- 添加 class 示例：
document.documentElement.classList.toggle('keyboard-open', isKeyboardOpen); - CSS 中针对性控制：
.keyboard-open .fixed-bottom { display: none; }<br>.keyboard-open .content { height: calc(100vh - 60px); }<br>.keyboard-open input:focus { scroll-margin-top: 44px; }
关键细节：避免误判和抖动
– 设置合理阈值：Android 中高度变化小于 30px 视为无效 resize（防滚动条、地址栏隐藏等干扰）；
– iOS 需降级兜底：若 visualViewport 不可用，用 scrollTop > 0 && document.activeElement?.matches('input, textarea') 辅助判断；
– 避免重复触发：使用 setTimeout 防抖，确保状态稳定后再更新 class；
– 不要仅依赖 focus/blur：Android 中键盘收起后输入框可能仍 focus，需结合视口数据交叉验证。
更稳妥的做法：优先用 visualViewport API
现代方案应以 window.visualViewport 为核心：
- 它返回的是“用户真正看到的视觉区域”，不受软键盘覆盖影响（iOS）或准确反映压缩后高度（Android）；
- 监听
visualViewport.addEventListener('resize', ...)比resize更精准、及时； - 兼容性处理：iOS 13+ / Android Chrome 61+ 支持，旧版本 fallback 到 clientHeight + focus 策略。
例如：const realHeight = window.visualViewport?.height ?? window.innerHeight;
这个 realHeight 才是布局中该用的“真实可用高度”，可配合 calc(100vh) 替代方案或动态设置 CSS 变量。
