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

前端之家收集整理的这篇文章主要介绍了html – iPhone X状态栏黑色网络应用程序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用网络应用程序并使用模拟器在iPhone X上进行测试,状态栏完全是黑色的.如何让我的网站覆盖整个屏幕?我没有使用任何图书馆;我看过许多提到Cordova的问题,但我所拥有的只是带CSS的HTML.

Screenshot of iPhone X simulator

这是我头脑中的HTML代码.

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">
  
最佳答案
这是可能的,但需要更多的几行.这是怎么做的.严格来说,我认为你不需要width = device-width和initial-scale = 1.0,我在你使用它时添加了它. launch.png是您的启动图像,它将显示您的页面是否需要时间加载,它应该是一个1125 x 2436 PNG图像,当然也可以放在您的服务器上.它需要使它工作.黑色半透明状态栏样式和视口适合=封面也是如此.

另请注意,如果您已经创建了页面的快捷方式,则必须在使用此内容更新页面后将其删除并再次创建.

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='viewport-fit=cover,initial-scale=1.0'>
  

上面的内容将拉伸您的视口一直到iPhone X(和其他型号)的顶部,将顶部条形内容(时钟,电池状态,信号强度等)设置为透明白色.如果你有一个白色或非常浅的背景,这可能看起来不太好.不幸的是,没有办法在你自己的背景上有暗的内容.但是,有几个选项可能足够好.

将apple-mobile-web-app-status-bar-style设置为默认值可在纯白色背景板上显示黑色顶栏内容.如果您可以接受您的内容以获得白色顶部条形背景并在其下滚动,则此效果会很好.

<Meta name="apple-mobile-web-app-status-bar-style" content="default">

另一个选择是将apple-mobile-web-app-status-bar-style设置为黑色.这更方便,它创建了具有白色顶部条形内容的纯黑色背景,有效地导致使用默认值的反向.

<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.

猜你在找的HTML相关文章