Question

我正在使用网络应用程序并使用模拟器在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>

Answer 1

这是可能的，但需要更多几行。这是怎么做的。严格来说，我认为您不需要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">

Here are samples of how the different content parameters will look. Not iPhone X but the color schemes are same.

Read here if you need to account for the different top bar heights on different iOS devices.

Answer 2

自从 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

Answer 3

你不能。 iOS并不支持全屏。

https://caniuse.com/#feat=fullscreen

iPhone X状态栏黑色网络应用程序

3 个答案: