I noticed that you already set-up a feature in AdaptiveTheme (below), and when checking out that icon size for another issue, I noticed there's a way to set the color of the Status Bar in iOS Safari. Any chance this feature could also be added to AdaptiveTheme to complete the appearance and keep all those iOS settings/icons in one place?

https://developer.apple.com/library/ios/documentation/AppleApplications/...

This what you already enabled:
<meta name="apple-mobile-web-app-capable" content="yes">

This is an addition to that:

Changing the Status Bar Appearance

If your web application displays in standalone mode like that of a native application, you can minimize the status bar that is displayed at the top of the screen on iOS. Do so using the status-bar-style meta tag.

This meta tag has no effect unless you first specify standalone mode as described in “Hiding Safari User Interface Components.” Then use the status bar style meta tag, apple-mobile-web-app-status-bar-style, to change the appearance of the status bar depending on your application needs. For example, if you want to use the entire screen, set the status bar style to translucent black.

For example, the following HTML sets the background color of the status bar to black:

<meta name="apple-mobile-web-app-status-bar-style" content="black">
For more on status bar appearance, see “apple-mobile-web-app-status-bar-style” in Safari HTML Reference.

Comments

deanflory’s picture

deanflory commented
Issue summary: View changes
deanflory’s picture

deanflory commented

More info:

https://developer.apple.com/library/safari/documentation/AppleApplicatio...

apple-mobile-web-app-status-bar-style

Sets the style of the status bar for a web application.

Syntax

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

Discussion

This meta tag has no effect unless you first specify full-screen mode as described in “apple-mobile-web-app-capable.”
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. The default value is default.

Availability

Available in iOS 2.1 and later.

Support Level

Apple extension.

deanflory’s picture

deanflory commented
Issue summary: View changes
deanflory’s picture

deanflory commented

Also found this here:

http://stackoverflow.com/questions/6582732/what-does-apple-mobile-web-ap...

A couple of caveats:

  • 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).
  • 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.
deanflory’s picture

deanflory commented
Issue summary: View changes
deanflory’s picture

deanflory commented
Component: Extensions » Mobile
deanflory’s picture

deanflory commented

For anyone wanting to implement this now in their site, this is the easiest way to produce these in your theme's HEAD:

Edit your theme's template.php file to include this for both the startup image and the black status bar style.

function yourthemenamehere_preprocess_html(&$vars) {

$apple_touch_startup_image = array(
  '#tag' => 'link', 
  '#attributes' => array(
    'rel' => 'apple-touch-startup-image', 
    'href' => '/sites/all/themes/yourthemenamehere/images/touch/startup.png',
  ),
);
drupal_add_html_head($apple_touch_startup_image, 'apple-touch-startup-image');

$apple_mobile_web_app_status_bar_style = array(
  '#tag' => 'meta', 
  '#attributes' => array(
    'name' => 'apple-mobile-web-app-status-bar-style', 
    'content' => 'black',
  ),
);
drupal_add_html_head($apple_mobile_web_app_status_bar_style, 'apple-mobile-web-app-status-bar-style');

}