iOS 13 Safari：window.innerHeight 中的错误

Question

据我了解，window.innerHeight应该返回没有浏览器镶边（地址栏、导航、标签等）的视口的大小。但在最新版本的iOS13中似乎并非如此。相反，有两个问题：

1. （有时*纵向太小）如果您在没有打开标签的情况下从纵向模式旋转到横向模式，然后又回到纵向模式，则该window.innerHeight值最终太小（大约是底部导航栏的大小），给出了这种可怕的白色屏幕底部的栏。有关更多详细信息，请参阅有关 macrumors 的讨论：https ://forums.macrumors.com/threads/is-this-a-mobile-safari-bug-white-space-appears-at-bottom-after-rotating-iphone.2209551 /
2. （有时*横向太大）如果你打开了一堆标签，“显示标签栏”打开，然后从纵向模式旋转到横向模式，那么window.innerHeight太大并且屏幕底部被切断。

即使在打开每个可能的视口标签及其所有排列之后，它似乎也不起作用。我还查看了一些关于如何在 iOS Safari 中处理这个问题的“教程”，到目前为止，我检查过的每个教程都已损坏。

我还尝试了 的所有变体，window.innerHeight结果大致相同：

• 新的可视化视口 API返回相同的结果，与 window.innerHeight 没有区别。底部仍然在横向模式下被截断，标签栏和纵向模式仍然在底部有白色栏。
• document.documentElement.clientHeight用CSS的各种置换（使用100vh，100%等等）给出相同的结果。同样适用getBoundingClientRect于各种 div 和 div 元素的组合。
• window.outerHeight并screen.height给出不带浏览器chrome的全屏大小，一般过大导致溢出。
• 还尝试了一些我现在已经忘记的其他随机事情（应该做笔记）。

如果您可以猜测顶部和底部浏览器 chrome 的大小，您可以在每个设备的基础上手动捏造它，但这非常脆弱。我正在寻找一种解决方案，它不涉及为每个 iOS 设备和软件配置构建一个巨大的查找表。

我正在尝试为网页游戏制作全屏画布元素，但此问题阻碍了我的发布能力。据我所知，此问题仅存在于 iOS13 中。环顾四周后，我仍然没有找到一个好的解决办法。

Answer 1

我最近遇到了同样的问题，我可以这样解决：

CSS（仅显示相关部分）：

html {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    background: #99f; /* Safari for iOS and Opera for Android in fullscreen mode?!?! */
}

body {
    padding: 0;
    margin: 0;
    color: #000;
    width: 100%; /* I was desperate! This was a wild guess... And worked! */
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    background: #99f;
}

TypeScript（仅显示相关部分）：

// Assume everything here is in the global scope

function detectIOSOrSafari(): boolean {
    // /sf/ask/632703781/
    if ((navigator.userAgent.indexOf("Chrome") <= 0 && navigator.userAgent.indexOf("Safari") >= 0) ||
        (navigator.userAgent.indexOf("Mac") >= 0 && ("ontouchend" in document)))
        return true;
    switch (navigator.platform) {
        case "iPad Simulator":
        case "iPhone Simulator":
        case "iPod Simulator":
        case "iPad":
        case "iPhone":
        case "iPod":
            return true;
    }
    return false;
}

const isIOSOrSafari = detectIOSOrSafari();

function adjustWindowSize(): void {
    let widthCss = window.innerWidth,
        heightCss = window.innerHeight;

    if (document.documentElement && ("clientWidth" in document.documentElement)) {
        widthCss = document.documentElement.clientWidth;
        heightCss = document.documentElement.clientHeight;
    }

    if (isIOSOrSafari) {
        let bodyRect: DOMRect = null;

        // Another act out of desperation...
        if (document.documentElement && ("getBoundingClientRect" in document.documentElement))
            bodyRect = document.documentElement.getBoundingClientRect();
        else if (("getBoundingClientRect" in document.body))
            bodyRect = document.body.getBoundingClientRect();

        if (bodyRect) {
            widthCss = bodyRect.right - bodyRect.left;
            heightCss = bodyRect.bottom - bodyRect.top;
        }
    }

    // Rest of the code, where I use widthCss and heightCss to compute my canvas' size
}

window.onresize = adjustWindowSize;

您可以在项目存储库中查看完整的源代码： https: //github.com/carlosrafaelgn/pixel