If you take a look at the application running in your iPhone device, you’ll see a small, thin, and light gray bar at the top of the screen. This is the status bar and it shows information, such as the current time, the status of the battery, and the name of the carrier. In this recipe, we’ll learn how to modify the default status bar of the iPhone.
Getting ready
For this recipe, we don’t need any framework as we can use one of the native properties of the Safari Mobile web browser installed in the device.
How to do it…
We only need to add one line in the meta section of the HTML file. Instead of creating a new file, you can reuse the file used for the previous recipe. To change the background color to black, we’ll add this line:
If we prefer to change the default status bar to translucent black, we can do it by adding the following line:
After changing and reloading your file, you’ll see something similar to the following screenshot:
How it works…
The meta tag provided by the Safari Mobile browser allows to modify the default status bar of the iPhone. In fact, this tag only allows changing the background color. If we don’t need to modify this bar, we can omit the tag or just use the default value for the content attribute of this tag.
Keep in mind that the apple-mobile-web-app-status-bar-style only works when the application is using the full screen mode and, when an icon for the application has been added to the home screen. Don’t be impatient. We’ll take a closer look at these issues in the following topics.
See also
► Viewing applications in full screen recipe in topic 3, Events and Actions
► Choosing an icon image for the application recipe in topic 4, A Picture Speaks a Thousand Words
