[英]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.