Configuring Android Web Applications

Question

iPhone web apps have four configuration features available (not including the HTML5 application cache) to configure how web pages behave when you save the web page to the ho

Answer 1

There are different meta elements that we can use to achieve the best results possible:

1. First of all we need to set the viewport for our app as so:

   There is a little hack here, for devices with taller screens (iPhone 5 for example):

   Just put it under the other meta and it will do all the magic.

2. Now that we have the basics, we will tell the mobile-browsers to "read" our website as if it was an app. There are two main meta elements:

   This will make our website to be opened in full-screen-mode and style the default status-bar.

3. We are done with the "behaving" meta elements, now lets start with our icons. The amount of icons and code lines will depend totally on you. For the startup-image I prefered to create one icon for each resolution, so that my "loader" acts the same on all devices (mainly Apple devices). Here's how I did it:

   NOTE: The format must be PNG and all the sizes must be respected, otherwise it will not work.

4. To finish, we will also need some icons for our app. This icon will be displayed on the devices menu. Here's how I did it:

   NOTE: You can also use "precomposed" for your icon not to be shown with iOS reflective shine. Just add this word where you define rel as so:

As said, this works better on Apple devices. But the app icon has been proved on Android devices and it works to.