在Web应用程序中隐藏iPhone状态栏?

时间:2010-05-23 23:31:10

标签: javascript iphone html

有没有办法禁用iPhone网络应用中的状态栏?我正在做一些需要固定全屏视图的东西,状态栏很烦人。

7 个答案:

答案 0 :(得分:26)

这是不可能的。

答案 1 :(得分:14)

不幸的是,没有。只有两个选项blackblack-translucent。请注意,black-translucent部分网页框架在状态栏下部分可见,而使用black实际上将网框向下推,因此它的高度稍微小一些。

这就是Apple在documentation中所说的:

<meta name="apple-mobile-web-app-status-bar-style" content="black">
  

除非您首先按“apple-mobile-web-app-capable.”

中所述指定全屏模式,否则此元标记无效      

如果content设置为default,则状态栏显示正常。如果设置为black,状态栏将显示黑色背景。如果设置为black-translucent,则状态栏为黑色且半透明。如果设置为defaultblack,则网络内容会显示在状态栏下方。如果设置为black-translucent,则Web内容将显示在整个屏幕上,状态栏会部分遮盖。默认值为default

答案 2 :(得分:2)

我已经看到您可能必须从主屏幕中删除该网络应用程序,然后再添加它,如果您添加了元标记,它会产生任何差异。为我工作。

答案 3 :(得分:2)

我能得到的最接近的(iOS7,我认为iOS6会显示黑暗状态栏)显示状态栏,但背景是透明的,并没有按下页面的内容;因此,您可以在应用顶部看到网络连接时间,电池百分比和时间。

meta tags:
name="apple-mobile-web-app-capable" content="yes"
name="apple-mobile-web-app-status-bar-style" content="black-translucent"

此外,要查看任何更改,您需要从主屏幕删除该应用,然后重新添加。

如andyg303所述:

  

minimal-ui可能已经开始测试,但已经过测试,并且无法在iPhone(iOS 7.1.2 4s)或iPad(v2 7.1.2)上运行。

答案 4 :(得分:2)

这至少现在是可能的。 您需要在 index.html 中添加 migration.exe init

manifest.json

在 Angular、React 或 Vue 等项目中,不要忘记将此文件包含在资产中,否则您的浏览器将不知道此文件。

你可以像这样构建你的 manifest.json

<link rel="manifest" href="manifest.json">

start_url 和 scope 必须相同或 start_url 至少在范围内。如果您随后在设备上将您的应用另存为渐进式 Web 应用,则该范围内的所有页面都将显示而没有状态栏。

答案 5 :(得分:-1)

它已在iOS 7.1中添加

只需将minimal-ui添加到viewport元标记,例如:

从这里采取: https://forums.whirlpool.net.au/archive/2194915

请注意,这只适用于iPhone,据我所知,而不是iPad

答案 6 :(得分:-9)

<meta name="apple-mobile-web-app-capable" content="yes" />