近日，大量iPhone和iPad用户反映，在Safari浏览器及各类第三方应用中输入文本时，一旦调出系统键盘，页面布局便会瞬间“崩坏”——元素错位、导航栏遮挡、输入框凭空消失，甚至出现大面积白屏。这一持续困扰开发者和普通用户的“陈年旧疾”，在iOS 17.4更新后再度集中爆发，引发广泛关注。

问题重现：键盘一开，页面“变形”

多位用户向记者展示了问题复现过程：在任意含有文本输入框的网页或App内点击输入区域，iOS键盘从底部弹出时，页面本应自动向上滚动并调整视口高度，但实际却出现严重变形。常见的现象包括：

  • 输入框被键盘完全遮挡：用户无法看到自己正在输入的内容，只能盲打。
  • 固定定位元素错位：页头、底部菜单等固定（position: fixed）元素被键盘“推”到不可见区域，或与输入框重叠。
  • 页面缩放异常：部分网页在键盘弹出后整体放大或缩小，导致文本超出屏幕边界。
  • 双向滚动冲突：页面既能在键盘上方滚动，又能在键盘后方滚动，造成操作混乱。

开发者社区中，这一Bug被戏称为“iOS键盘的祖传手艺”。事实上，早在2013年iOS 7时代就有类似报告，但苹果始终未彻底根治。此次集中爆发，多与系统版本升级至iOS 17.4及以上有关。

谁在遭殃？开发者与普通用户双输

受影响最大的当属移动端Web开发者。由于iOS Safari对键盘弹出时visualViewport和layoutViewport的处理与Android存在根本差异，开发者不得不大量使用“移动端键盘探测”黑科技——通过监听resize事件或检测window.innerHeight变化来手动补偿布局。但即使这样，仍无法完全避免错位。

一位不愿透露姓名的前端工程师告诉记者：“我们测试了十几种方案，包括scrollIntoView、position: sticky加padding技巧等，但iOS总有一些边缘情况让代码失效。尤其是当用户开启‘单手模式’或使用第三方键盘时，问题更不可控。”

普通用户的体验则更为直接。在社交媒体上，不少用户吐槽：“输入地址时键盘弹出来，确认按钮被推到屏幕外面去了，只能强制重启App”“每次在购物App里输入优惠券代码都要碰运气，手机仿佛变成了‘开盲盒’”。甚至有用户表示，因为无法在微信聊天框中正常选择表情，被迫改用语音输入。

技术拆解：谁动了布局的“奶酪”？

要理解这一Bug，需从iOS键盘的“怪异行为”说起。与Android系统严格将键盘视为窗口“子元素”不同，iOS Safari在键盘弹出时，并不会改变window.innerHeight的值（即认为视口高度不变），而是通过修改visualViewport来模拟“内容区域缩小”。这导致position: fixed元素仍然参照原始视口定位，从而“浮”在键盘上方或“沉”到键盘下方。

更糟糕的是，苹果在iOS 16引入了“键盘避让”API（keyboardWillShow等通知）后，部分应用使用了不当的自动调整逻辑，与Safari原生的视口控制发生冲突。而iOS 17.4又调整了第三方键盘的沙盒权限，进一步加剧了布局计算的不一致。

知名Web开发者平台Stack Overflow上，相关问题的热度已超过5000个“赞成”标记，大量开发者呼吁苹果提供“真正的键盘布局控制”——例如允许网页读取键盘准确高度，并像Android那样统一视口行为。

苹果沉默，用户自救

截至发稿，苹果官方尚未就此次大规模布局问题发布专门声明。不过，苹果开发者文档中的“Safari Web内容指南”曾含糊提及“不要假设键盘出现时视口尺寸会变化”，这被开发者解读为“苹果无意改变现有行为”。

在官方修复到来之前，部分资深用户总结出临时应对方案： - 升级至最新的iOS 17.4.1（已修复部分第三方键盘Bug）； - 关闭“键盘→单手模式”和“启用完全键盘访问”； - 在Safari设置中开启“请求桌面网站”，以绕开移动端视口逻辑； - 使用系统自带输入法，第三方输入法（如搜狗、百度）的兼容性问题更严重。

对于开发者而言，短期内建议采用“强制滚动”+“动态padding”组合方案：在输入框获得焦点时，用JavaScript计算键盘预估高度（约为屏幕高度的40%），并主动将页面往上推一个可视区高度。长远来看，业内呼吁苹果开放更稳定的“键盘遮挡区域”API，而非让开发者靠猜来解决。

移动端键盘与页面布局的“爱恨情仇”，已纠缠超过十年。苹果能否在iOS 18中彻底终结这一痛点，全球数亿用户正拭目以待。