iOS (iPhone) Tags

HTML tags

you can use in your iDevice web development arsenal: iPhone meta tags, splash screens and icons.

Url and Button Bar Meta Tags

The iPhone uses the Safari web browser, so that’s what we’re going to focus on here. When the browser is opened, the URL bar appears at the top and the button bar appears at the bottom. When anyone visits your page from an iPhone, this is what they will see by default.

To make the URL and button bars disappear, add this meta tag to the <head> of your document:

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

Change the iPhone’s Status Bar

The iPhone’s status bar appears at the very top of the iPhone, and is a standard feature that appears when one is using Safari. It can, however, be distracting, and although you can’t make it disappear, you can change the color of it to black, the default, which is white, or make it translucent. You do this using another meta tag, like this:

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

The values that you can change for content are default (white), black and black-translucent.

Prevent Users From Scaling (Pinching)

On the iPhone, if you make the gesture known as “pinching” while you are on a website or web app, it zooms in. iPhone applications don’t do that, and you may not want users to zoom in on your website either–especially if you’ve taken the trouble to design a website that fits perfectly on the iPhone with maximum readability in mind. To prevent users from doing that, there is another meta tag you can use:

<meta name="viewport"
content="user-scalable=no,
width=device-width" />

Create An Icon for My Bookmark

When users are browsing the web via Safari on the iPhone, they can press “+” and “Add to Home Screen” to create an icon that will appear on their home screen (Apple calls these icons “Web Clips”). It will open up your website in Safari the next time the user selects the icon. Instead of the default bookmark icon, you can specify an image that the iPhone will use when it creates the “bookmark” icon on the user’s home screen by using a link reference tag:

There are two options to setup this icon. The first is to use the icon as is, all that is added are rounded corners. To do this we use this Meta tag:

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

The second option gives the icon the standard Apple gloss:

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

In order to create a home screen icon, you will need to create a 57 x 57 pixel .png file, and use that in the tag shown above. If you are creating a site for the iPad, the image size will need to be 72×72 pixels. Like the others in this article, the tag goes within the <head> section of your HTML document. The iPhone adds a glossy appearance to the icon, but if you don’t want it, you can change the rel information to apple-touch-icon-precomposedin the link shown above.

Create a Splash Screen

When you are developing websites for the iPhone OS, similar to native applications, developers are able to specify a startup image, or splash screen, that is displayed while the website is launched. It appears on the device as shown in this image which shows a startup image from Google on an iPhone:

You can create your own startup image by creating a 320×460 .png file, and then add a link to it in the <head> of your HTML document like this:

<link rel=
"apple-touch-startup-image"
href="splash_screen.png" />

Keep in mind that the image size must be specifically 320×460 pixels, or the iPhone will ignore it entirely. If you are creating a startup image for the iPad, which works the same way, the startup image must be 1004×768.

As you can see, the creation of a website for the iPhone (or iPad) requires the use of specific tags to make it look professional and take advantage of the features that the devices provide to web developers.

Setting the Viewport

This Meta tag tells the device the width of the page to display, the minimum and maximum zoom value, the initial zoom value and whether the user has the ability to zoom in and out. If your website is less than 980px (the default width of the webpage display) then the width should be set with this tag. Also, if the application is iPhone specific, then the width should be set to the width of the iPhone, iPad or iPod Touch. One should also bear in mind that instead of using the actual value of the width and height of the screen, values of ‘device-width’ and ‘device-height’ should be used. Here are some example tags:

<meta name=
"viewport" content = 
"width = device-width,
initial-scale = 2.3,
user-scalable = no" />
<meta name="viewport" content =
"width = device-width,
initial-scale = 2.3,
minimum-scale = 1, 
maximum-scale = 5" />

Here are all the available options:

width – Width of viewport in pixels. [Default: 980, Range: 200 – 10,000]
height – Height of viewport in pixels. [Default: calculated with the width and aspect ratio of the device, Range: 223 – 10,000]
initial-scale – The initial scale of the viewport. [Default: calculated to fit the webpage in the area available, Range: calculated with minimum-scale and maximum-scale properties.]
minimum-scale – The minimum scale of viewport. [Default: 0.25, Range: >0 – 10]
maximum-scale – The maximum scale of viewport. [Default: 1.6, Range: >0 – 10]
user-scalable – Whether the user can zoom in and out. [Default: yes, Options: yes or no]

Detect Phone Numbers

Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iOS.

<meta name=
 ”format-detection”
 content=”telephone=no”>
Or in Your links : href="tel:
+44774 782 7066"

Open SMS Message

Creating an SMS message is as simple as suposeidly :-

<a href="sms:+44774 782 7066?
body=hello">Open my SMS message</a>

However im on iOS 5.1.1 and I cant get it to work.

Google Maps

This one will open the native Google Maps App

<a href="http://
maps.google.com/maps?q=tenby">
Where I Live</a>

YouTube

<a href="

http://www.youtube.com/watch?v=

VIDEO_IDENTIFIER">Play Video</a>
<a href="

http://www.youtube.com/v/

VIDEO_IDENTIFIER">Play Video</a>

Tailoring the page

The following css is in style.css:
 body {
 -webkit-touch-callout: none;
 -webkit-text-size-adjust: none;
 -webkit-tap-highlight-color:
rgba(0,0,0,0);

On mobile safari, when you hold down on a link or piece of text for a few seconds, a callout pops up to ask if you want to copy/paste, or email. The first line disables this for everything in the document, which also helps with catching our custom touch events. Apple recommends a better practice is to only put these on certain objects on your page, not everything.

Mobile safari also tries to resize text to be helpful to users if it thinks the aspect ratio is too small. The second line turns off this adjustment.

The third line tells safari to highlight things in black if you click on them to show an action (rather than the default gray).

CSS Switch

For reference thisFunction could come in handy

orientation switch
function orient(o){switch(o){
case -90:case 90:
$('#container').removeClass()
.addClass('landscape');
break;default:
$('#container').removeClass()
.addClass('portrait');
break;   } } 

Conclusion

Now, with your application setup, you will be able to launch it from the home screen and then see the splash screen while it loads up. Once loaded the application should be full screen with your chosen status bar.