HTML fullscreen apps for the iPad

As developing a product for a tablet computer, the iPad appears. Because it was matching perfectly for our requirements we were trying to get the existing browser application as close to a native iPad app as possible. I want to share my research of special and nearly unknown parameters in HTML and CSS in a series of posts.

Menu bars:

One part is the usage of the entire screen without address bar or other menu icons. If you open Safari on the iPad you will find a menu bar on the top of the screen. If you open Safari on the iPhone or iPod Touch you will find two menu bars, one at the top and one at the bottom. This is caused by the screen size, which is much larger on the iPad.

After loading a long web site on the iPhone or iPod Touch the address bar is hidden on top of the page. The normal menu bar on the bottom of the screen is always visible (in normal browsing mode). The long menu bar with the address input area is always visible on the iPad. This is not dependent on the orientation of the device.

iPad

IMG_0006

IMG_0007

iPhone/iPod Touch

IMG_0182

IMG_0183

To get the full screen mode for your application you need three things:

  • a full ajaxified app (multi-page apps don’t work)
  • the meta tag apple-mobile-web-app-capable
  • the app saved on the home screen

The important part for your web app is the code:

 

<meta name="apple-mobile-web-app-capable" content="yes" />

 

Another little thing is the small bar on top of the page with the Wifi intensity and battery indicator. It isn’t possible to hide this bar, but you can choose if it is black, white or transluent. A transluent bar is helpful if you want to avoid zooming, because the content is now fullscreen and is using the entire screen with the small menu bar transluent on top of the screen.

To achieve this behaviour you can use the following code:

 

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

 

All this parameters are unused if you enter the address inside the Safari application. You need to open the page and save it on the home screen which is in the same menu as the bookmark function.
IMG_0008

IMG_0009

IMG_0010

Normally a screenshot of the site is taken and transformed to a kind of icon on the home screen. To optimize the icon you can provide your own icon with the size of 57 x 57px, which is used instead of the screenshot. If you search around the web you will find different sizes, but this was a bug in an older firmware version.

 

<link rel="apple-touch-icon" href="/my_custom_icon.png"/>

 

If you specify your icon in this way there are used some effects like shining before it is used as icon. If you want to use the icon as it is you need to name the image file apple-touch-icon-precomposed.png. If you store an icon in the root folder with the previous name or apple-touch-icon.png you don’t need the link tag.

If your display resolution doesn’t fit or the aspect ratio choosen by Safari is hiding some parts of your html app you can set the viewport width. This can be a specific value or a device independent value. If you have a specific width this is measured in pixel but written without unit.

 

<meta name="viewport" content="width=device-width" />

 

Another post in this series will be about app distractions like user zooming, disable copy and paste, phone number highlighting, …

For more information about this topic visit the sites:

No Comments Yet.

Leave a comment


+ eight = 13