嘿，这个问题我在iOS Safari的混合应用和全屏Web项目里碰到过好几次，确实是苹果虚拟键盘的视口计算bug搞的鬼。结合你用Angular、当前还在Cordova环境的场景，给你几个针对性的排查和解决方向：

1. 修正Viewport配置+手动重置视口高度 #

你的meta viewport已经加了viewport-fit=cover，但iOS在键盘弹出时会错误修改视口高度，导致页面布局偏移。可以试试这两步：

• 先调整viewport参数，去掉height=device-height，改成：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no">

device-height在键盘弹出时会被Safari错误计算成“屏幕高度-键盘高度”，收起后不会自动还原，这是常见的触发点。

• 然后在全局监听输入框失焦事件，强制重置视口高度并修正滚动位置：

// 在你的根组件（比如app.component.ts）里添加
import { Renderer2, OnInit, OnDestroy } from '@angular/core';

export class AppComponent implements OnInit, OnDestroy {
  private focusoutListener: () => void;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    this.focusoutListener = this.renderer.listen(document, 'focusout', () => {
      // 延迟100ms确保键盘完全收起
      setTimeout(() => {
        document.documentElement.style.height = '100vh';
        window.scrollTo(0, 0); // 强制滚动到顶部，修正HTML标签偏移
      }, 100);
    });
  }

  ngOnDestroy() {
    this.focusoutListener(); // 移除监听，避免内存泄漏
  }
}

2. 替换默认滚动行为，手动控制输入框位置 #

iOS Safari默认的“自动滚动输入框到可视区域”逻辑有时候会计算过度，导致页面整体偏移。可以手动接管这个行为：

• 给所有输入框绑定focus事件，阻止默认滚动后精确调整位置：

// 在输入组件里
onInputFocus(event: FocusEvent) {
  const target = event.target as HTMLElement;
  event.preventDefault(); // 阻止Safari的默认滚动
  // 手动滚动到输入框居中位置，只滚动必要的距离
  target.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

• 临时禁用页面整体滚动：在输入框聚焦时给body加一个类，失焦时移除，避免页面整体被拉动：

body.input-focused {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

然后在TS里控制这个类的添加和移除即可。

3. 重构HTML/Body的CSS布局 #

你当前的CSS里html用了float:left，这会让元素脱离正常文档流，很可能干扰Safari的布局计算。建议调整成这样：

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 让内部组件处理滚动，避免页面整体滚动 */
}
app-root {
  display: block;
  height: 100%;
  width: 100%;
}
home-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: -webkit-fill-available;
  overflow: auto; /* 让组件内部内容滚动，而非整个页面 */
}

去掉html的float:left和display:block（默认就是块级元素），确保根元素的布局是标准的全屏流式结构。

4. 监听Resize事件，动态修正布局 #

iOS Safari在键盘弹出/收起时会触发resize事件，你可以利用这个事件在键盘收起后强制修正页面位置：

// 同样在根组件里添加
private resizeListener: () => void;

ngOnInit() {
  // 其他监听...
  this.resizeListener = this.renderer.listen(window, 'resize', () => {
    const activeEl = document.activeElement;
    // 如果当前有输入框聚焦，不处理，让Safari完成滚动
    if (activeEl?.tagName === 'INPUT' || activeEl?.tagName === 'TEXTAREA') return;
    
    // 键盘收起后，强制重置滚动和视口高度
    window.scrollTo(0, 0);
    document.documentElement.style.height = `${window.innerHeight}px`;
  });
}

ngOnDestroy() {
  this.resizeListener();
}

5. Cordova临时修复（如果你还没替换方案） #

既然你近期要替换Cordova，但当前还在使用的话，可以试试专门的键盘插件来规避这个问题：
安装cordova-plugin-ionic-keyboard：

cordova plugin add cordova-plugin-ionic-keyboard

然后在config.xml里添加配置：

<preference name="KeyboardResize" value="true" />
<preference name="KeyboardResizeMode" value="native" />

这个插件会自动调整WebView的高度，避免页面整体偏移，是Cordova环境下比较省心的临时方案。

最后还有个小技巧：如果页面已经出现偏移，触发一次window.scrollTo(0, window.scrollY)，有时候能强制Safari重新计算布局，瞬间修正偏移。

内容的提问来源于stack exchange，提问作者Michael M.