[英]iPhone X status bar black web app
我正在開發一個網絡應用程序並使用模擬器在 iPhone X 上進行測試，狀態欄是完全黑色的。 如何讓我的網站覆蓋整個屏幕？ 我沒有使用任何圖書館； 我看到很多問題都提到了 Cordova，但我所擁有的只是帶有 CSS 的 HTML。
這是我的 HTML 代碼。
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="viewport-fit=cover, width=device-width, initial-scale=1.0" name="viewport">
<title>My PWA</title>
<link rel="stylesheet" href="/assets/styles/design.css">
</head>
這是可能的，但需要多幾行。 這是如何做到的。 嚴格來說，我認為您不需要width=device-width和initial-scale=1.0 ，因為您使用它，所以我添加了它。 launch.png是您的啟動圖像，它將顯示您的頁面是否需要時間來加載，它應該是1125 x 2436 PNG 圖像，當然也應該放在您的服務器上。 需要讓它工作。 black-translucent狀態欄樣式和viewport-fit=cover 。
另請注意，如果您已經為頁面創建了快捷方式，則必須在使用此內容更新頁面后將其刪除並重新創建。
<html><head>
<meta charset="utf-8">
<link rel="apple-touch-startup-image" href="./launch.png">
<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='viewport-fit=cover, width=device-width, initial-scale=1.0'>
<title>Test</title>
</head>
<body>
content
</body>
</html>
對於 iPhone X（和其他型號），上面的代碼會將您的視口一直拉伸到頂部，將頂部欄內容（時鍾、電池狀態、信號強度等）設置為透明白色。 如果您有白色或非常淺色的背景，這可能看起來不太好。 不幸的是，您無法在自己的背景中添加深色內容。 但是，有幾個選項可能已經足夠好了。
將apple-mobile-web-app-status-bar-style為default會在純白色背景板上顯示黑色頂部欄內容。 如果您可以接受您的內容具有白色頂欄背景並在其下方滾動，這看起來會很好。
<meta name="apple-mobile-web-app-status-bar-style" content="default">
另一種選擇是將apple-mobile-web-app-status-bar-style為black 。 這更方便，它創建了一個帶有白色頂欄內容的純黑色背景，有效地導致了使用default的相反。
<meta name="apple-mobile-web-app-status-bar-style" content="black">
自 iOS 14 和 iPhone 上引入暗模式以來，Apple 進行了一些更改。 如果您正在尋找缺口周圍的白色或黑色條（取決於明/暗模式），您可以添加以下元數據：
<meta name="apple-mobile-web-app-status-bar-style" media="(prefers-color-scheme: light)" content="light-content" />
<meta name="apple-mobile-web-app-status-bar-style" media="(prefers-color-scheme: dark)" content="dark-content" />
條的顏色將在暗模式激活或停用時自動調整。
此處提供更多選項和說明： https : //firt.dev/ios-14.5/#status-bar-change
你不能。 iOS 不支持全屏。
iPhone 11 上的 apple-mobile-web-app-status-bar-style
[英]apple-mobile-web-app-status-bar-style on iPhone 11
如何刷新Apple移動Web應用程序狀態欄樣式元標記？
[英]How can I refresh the Apple mobile web app status bar style meta tag?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.