Capacitor iOS应用height: -webkit-fill-available高度异常求助

问题场景 #

开发Capacitor跨端应用时，Android端用height: 100vh设置全屏高度完全正常，但iOS端会出现滚动异常。试过CSS Tricks上的height: -webkit-fill-available方案，结果只有首次打开应用时生效，杀死应用重启后页面高度缩水到约97vh，没法铺满屏幕。

更稳定的JS解决方案 #

通过动态计算视口高度的方式彻底解决这个问题，具体实现步骤如下：

实现逻辑

监听窗口尺寸变化、屏幕旋转，以及Capacitor的应用就绪事件，实时计算当前可视区域的实际高度，将该值存入CSS自定义变量，样式中直接引用变量替代100vh。

代码示例

JavaScript部分：

// 计算并设置视口高度变量
function updateViewportHeight() {
  const vhValue = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vhValue}px`);
}

// 页面加载完成后初始化
window.addEventListener('load', updateViewportHeight);
// 监听窗口大小变化和屏幕旋转
window.addEventListener('resize', updateViewportHeight);
window.addEventListener('orientationchange', updateViewportHeight);
// 监听Capacitor应用就绪事件，确保重启后重新计算
import { App } from '@capacitor/app';
App.addListener('appReady', () => {
  updateViewportHeight();
});

CSS部分：

/* 用自定义变量实现全屏高度 */
.full-screen-element {
  height: calc(var(--vh, 1vh) * 100);
}

方案优势

• 每次应用启动（包括重启）都会重新计算视口高度，避免iOS端缓存旧高度的问题
• 实时响应视口变化，旋转屏幕或窗口尺寸改变时自动适配
• 贴合Capacitor的应用生命周期，适配原生容器的视口特性

内容的提问来源于stack exchange，提问作者Luteya Coulston