这是可能的，但需要多几行。以下是具体操作方法。严格来说我认为你不需要width=device-width and initial-scale=1.0，既然你用了，我就加了。这launch.png是您的启动图像，它将显示您的页面是否需要时间加载，它应该是1125 x 2436当然，PNG 图像也可以放置在您的服务器上。这是required使其发挥作用。正如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 to default在纯白色背景板上为您提供黑色顶栏内容。如果您可以接受内容具有白色顶栏背景并在其下方滚动，那么这看起来会很好。
<meta name="apple-mobile-web-app-status-bar-style" content="default">
另一个选项是设置apple-mobile-web-app-status-bar-style to black。这更方便，它创建了带有白色顶部栏内容的纯黑色背景，有效地导致了使用的相反default.
<meta name="apple-mobile-web-app-status-bar-style" content="black">
以下是不同内容参数的外观示例。不是 iPhone X，但配色方案是一样的。 https://stackoverflow.com/a/40786240/4543629
如果您需要考虑不同 iOS 设备上不同的顶栏高度，请阅读此处。 https://ayogo.com/blog/ios11-viewport/
