apple-mobile-web-app-status-bar风格有什么作用？ [英] What does apple-mobile-web-app-status-bar-style do?

问题描述

什么

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

do - 有人可以解释一个例子吗？

do -- can someone explain with an example?

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

I found this line in the official Safari Developer Library

除非
首先将全屏模式指定为$，否则此元标记无效b $ b在url。中描述。

This meta tag has no effect unless you first specify full-screen mode as described in "url."

但是哪个网址？

这个元标记有什么好处？

What is the benefit of this meta tag?

推荐答案

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

First, the apple-mobile-web-app-capable hint has to be set for that to even work. This hint causes a web application to run in full-screen mode: it removes the address bar and navigation buttons you get by default in Mobile Safari. The removed areas are highlighted in red here:

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

So, once an app is in full-screen mode (i.e. the user has added the website to their home page), you can also control the colour of the remaining thin status bar at the top of the page with apple-mobile-web-app-status-bar-style, highlighted in red here:

根据文档：

如果内容设置为默认，状态栏显示正常。如果设置为黑色，状态栏的背景为黑色。如果设置为黑色半透明，则状态栏为黑色且半透明。如果设置为默认或黑色，则Web内容将显示在状态栏下方。如果设置为黑色半透明，则网页内容将显示在整个屏幕上，状态栏会部分遮挡。

If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.

一些警告：

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

1. This only works on the first page you load; any navigation away to another page will make the address bar and navigation buttons reappear. So if you want this to work, you have to build a single page website (for multiple 'pages' consider an Ajax page loading approach such as that used in the jQuery Mobile framework).

仅当您通过应用程序快捷方式图标到达网页时才有效; 如果您直接从Mobile Safari中导航到网站，则无效。

This only works when you arrive at the web page via an application shortcut icon; if you navigate to the website directly from within Mobile Safari it has no effect.

这篇关于apple-mobile-web-app-status-bar风格有什么作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！