apple-mobile-web-app-status-bar风格有什么作用？

Question

是什么

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

做 - 有人能解释一个例子吗？

我在官方Safari开发者库中找到了这一行

除非您首先按照"url"中的说明指定全屏模式,否则此元标记无效.

但是哪个网址？

这个元标记有什么好处？

Answer 1

首先,apple-mobile-web-app-capable必须为此设置提示才能工作.此提示使Web应用程序以全屏模式运行:它会删除默认情况下在Mobile Safari中获得的地址栏和导航按钮.删除的区域在此处以红色突出显示:

因此,一旦应用程序处于全屏模式(即用户已将网站添加到其主页),您还可以控制页面顶部剩余的精简状态栏的颜色apple-mobile-web-app-status-bar-style,在此处以红色突出显示:

根据文档:

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

几点需要注意:

1. 这仅适用于您加载的第一页; 任何导航到另一个页面将使地址栏和导航按钮重新出现.因此,如果您希望这样做,您必须构建一个单页网站(对于多个'页面'考虑Ajax页面加载方法,例如jQuery Mobile框架中使用的方法).

2. 这仅在您通过应用程序快捷方式图标到达网页时有效; 如果您直接从Mobile Safari中导航到该网站,则无效.