iOS

Tips and Tricks for iOS Web Development

This guest-tutorial is by Peter Witham owner of UIBuzz.com.

As the amount of people on iOS devices grows, it is becoming increasingly important to design for these devices. In this tutorial you will learn a bag of tips and tricks for designing web apps for iOS.

Detect retina display and load style sheet

Want to look good for those Apple retina displays? With this tag in the header of a page you can detect the retina display and load a separate style sheet.

<link rel="stylesheet" type="text/css" href="somefile.css" media = "only screen and (-webkit-min-device-pixel-ratio:2)"/>

Setting the viewport size

You should specify the viewport size for iOS devices, this helps with layout and scaling. Here is a standard page with one <p> tag containing text.

iOS Development: Viewport

Here it is again with a tag added to the page header which tells Safari mobile to respect the display area of the device in both portrait and landscape mode.

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

iOS Development: Correct Viewport

Device rotation detection via JavaScript

If you need to detect the rotation of a device you can do so with a simple JavaScript function that you call when the rotation changes. You achieve this by attaching a function call to the <body> tag of a page.

<body onorientationchange="updateDisplay();">

In the header add the following script, all you need to do is add your code in each of the case statements.

<script>
function updateDisplay() {
	switch (window.orientation) {
		case 0: break;   // Device is in portrait
		case 90: break;  // Device is in Landscape
		case -90: break; // Device is in counterclockwise Landscape
	}
}
</script>

Disable image save panel

To prevent the pop out panel that gives the user options to save or copy an image from a page when they tap

iOS Development: Save Image

use a CSS style to disable the feature.

-webkit-touch-callout: none;

A complete img tag example below with the style inline,

<img src="apple-touch-icon.png" width="129" height="129" alt="Apple Touch Icon" style="-webkit-touch-callout: none;">

Now they will get the option to copy the image,

iOS Development: Save Image Disabled

We can also disable the option to copy any item on a web page from text to images and more by including another CSS style

-webkit-user-select: none;

So a complete image tag that prevents the user from saving the image or selecting it to copy would look like this using inline styles

Tip: I always recommend using a stylesheet and never using inline styles for easy management and changes, versioning, readability of code.

<img src="apple-touch-icon.png" width="129" height="129" alt="Apple Touch Icon" style="-webkit-touch-callout: none; -webkit-user-select: none;">

Disable auto correct iOS features

A nice feature of iOS is the automatic correction and suggestion tooltip that appears when you are typing. There are times though that you may want to disable that feature, for example a standard input box for a name or password. The default behavior will be for iOS to try and help you. The example below shows a standard <input type="text"> tag

iOS Development: Auto Correction Suggest

By adding some attributes to the tag we can disable both the correction and suggestion features. Which yields the following result

iOS Development: Auto Correction Disabled

Note: The following only work if the user accesses your web page via an icon on the home screen, this is referred to as a full screen web application and is ideal for giving your web pages a native iOS application feel.

Changing the status bar styles

There are three options available to you for changing the look of the status bar, choose from the following tags and place one in the page header. The first is the standard look you get by default, this is the same as having no tag in the header at all.

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

iOS Development: Normal Status Bar

The second is to have the black style with white icons and text.

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

iOS Development: Black Status Bar

The third is interesting, it gives us the same as Black but with transparency. Remember that the page background will be partially visible through the status bar, however you cannot interact with it so take that into account when designing the layout.

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

iOS Development: Transparent Status Bar

Setting a web site icon for the home page

Add an icon for the homepage shortcut on iOS with the following tag in the page header (note iOS automatically adds the glass effect for you, this can be disabled). I recommend using this file name and placing the file in the site root just like favicon.ico

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

There are some alternative options here, you can use bigger icons for the iPad and iPhone retina display by using the following variations.

<link rel="apple-touch-icon" href="apple-touch-icon-72.png" sizes-"72x72"/>
<link rel="apple-touch-icon" href="apple-touch-icon-114.png" sizes="114x114"/>

You can read a full article about how the apple-touch-icon works in our HTML section.

Splash screen image

You can add a splash screen image to your web site, one thing to note though is the image will only appear for the length of time it takes Safari on iOS to download and render the web page. So in many ways since we hope our web pages download quickly you will only see the image for a couple of seconds. Just add the following tag to the page header and point the href to an image file that is 320×460 pixels. The image will always be displayed in portrait mode so design accordingly.

<link rel="apple-touch-startup-image" href="images/ios-splash.png">
Tags: , , , , , , , , , , , , , , , , , ,

About

Peter runs UIBuzz.com and has many years of experience as professional Web designer, solutions provider and developer, digital artist, PC and technical support specialist, and photo lab technician.

6 thoughts on “Tips and Tricks for iOS Web Development

  1. How did you find all of this information? Is this published somewhere official? I’ve been having a hard time figuring out what’s supported.

  2. I gathered the information over time, however you can probably find a lot in the Apple development guidelines, always an excellent resource. Check the support or developer sections of the Apple web site.

    Peter.

  3. Peter, the link to your website (in the about block) is incorrect. It links to uibyzz.com as opposed to uibuzz.com. Just thought I would let you know. Awesome tips by the way! Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>