帶有黑色半透明狀態欄的 iPhone 上的 WebApp：視口高度似乎是錯誤的

Question

我目前遇到的問題是，當我使用狀態欄樣式black-translucent時，我的 iPhone 沒有將內容顯示到網絡應用程序的屏幕底部。

底部總是有一個缺口。

我使用一個簡單的頁腳欄創建了一個最小的示例來演示它：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"> <style> body { background-color: DarkGray; } #footer { position: fixed; left: 0; bottom: 0; width: 100%; height: 54px; background-color: DimGray; } </style> <title>Test</title> </head> <body> <div id="content"></div> <div id="footer"></div> </body> </html>

該問題僅在 iPhone 縱向出現，並且僅在將應用程序保存到主屏幕時才會出現，因此它會全屏運行。 桌面瀏覽器也可以正確呈現頁面。

這是它在 iPhone 上的外觀截圖（通常較深的灰色條應直接位於底部）：

知道這里到底發生了什么以及如何解決嗎？

Answer 1

好的，似乎只有當頁面內容沒有垂直填充整個空間直到頁腳時才會發生這種情況。

一些用於放大內容的 CSS 將解決此問題：

#content {
    min-height: 100vh;
    padding-bottom: 54px;
}

Answer 2

在解決這個問題幾天后，我發現了一些可能的原因：
就我而言，僅在 ios 13.4.1 上就有問題。
我的 PWA 與登錄名位於不同的站點，重定向導致了此問題。
example.loginsite.com / example.myapp.com
底部的邊框是一個帶有“完成”按鈕的欄：

要解決此問題，只需將清單添加到您的 PWA。

其他原因可能與蘋果為 iPhone x、iPhone xs 等無邊框顯示器創建的“安全區”有關。
要解決此問題，需要使用變量 (-safe-area-init-*)，其中 * 是頂部、右側、底部、左側。

希望這個答案對誰在與這種奇怪的行為作斗爭有幫助。

帶有黑色半透明狀態欄的 iPhone 上的 WebApp：視口高度似乎是錯誤的

問題描述

2 個解決方案

解決方案1
0 2020-01-20 21:51:55

解決方案2
0 2020-05-07 07:42:40

帶有黑色半透明狀態欄的 iPhone 上的 WebApp：視口高度似乎是錯誤的

問題描述

2 個解決方案

解決方案1 0 2020-01-20 21:51:55

解決方案2 0 2020-05-07 07:42:40

解決方案1
0 2020-01-20 21:51:55

解決方案2
0 2020-05-07 07:42:40