iOS Safari PWA视口尺寸不一致问题及全屏适配方案咨询

问题分析 #

你遇到的核心问题是iOS Safari在PWA独立模式下，viewport-fit=cover配置与dvh单位的表现不一致：初始加载时dvh被计算为svh（受限视口高度），滚动后才切换为lvh（最大视口高度），这是iOS Safari对PWA初始视口计算的特殊逻辑导致的。

解决方案 #

通过媒体查询区分PWA独立模式与普通浏览器场景，结合自定义CSS变量指定不同的全屏高度单位，同时保留viewport-fit=cover实现全屏适配：

1. 保留视口元标签

你的现有视口配置无需修改，确保viewport-fit=cover生效：

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

2. 核心CSS代码

* {
    box-sizing: border-box;
}

/* PWA独立模式：强制使用最大视口高度 */
@media (display-mode: standalone) {
    :root {
        --full-height: 100lvh;
        /* 也可直接用100vh，PWA模式下viewport-fit=cover会让vh等于屏幕物理高度 */
        /* --full-height: 100vh; */
    }
}

/* 普通浏览器场景：用dvh适配地址栏显示/隐藏 */
@media not (display-mode: standalone) {
    :root {
        --full-height: 100dvh;
    }
}

html {
    height: var(--full-height);
    background-color: var(--bg-main);
}

body {
    margin: 0;
    overflow-x: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content {
    display: flex;
    flex-direction: column;
    height: var(--full-height);
}

3. 可选：JS辅助兼容旧版iOS

如果需要兼容iOS 13及以下版本（不支持display-mode媒体查询），可添加以下JS代码辅助检测PWA环境：

const isStandalone = window.matchMedia('(display-mode: standalone)').matches 
                   || window.navigator.standalone;

document.documentElement.style.setProperty('--full-height', isStandalone ? '100lvh' : '100dvh');

原理说明 #

• PWA独立模式：display-mode: standalone媒体查询触发后，使用100lvh强制锁定最大视口高度（即iPhone 12 Pro的844px），配合viewport-fit=cover完全占满屏幕，避免滚动后高度变化的问题。
• 普通浏览器场景：使用100dvh自动适配地址栏显示/隐藏时的视口高度变化，保持正常的浏览体验。

内容的提问来源于stack exchange，提问作者Tim Nikischin