11 Apple Code-Snippets You Might Not Know About

App Icons

Recently covered in a previous tutorial are the two types of apple icons. The default Meta tag looks like this.

1

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

Simply add the word “-Precomosed” into the code to remove the default gloss effect from the icon.

1

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

Display a Startup Image

While your mobile web application or website is loading, you can choose to have a splash screen displayed. This image should be 320px x 460px.

1

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

Display Using Full Screen Mode

Remove the web address bar and search from the top of the browser.

1

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

Change The Style Of The Status Bar

The status bar is the bar at the top of the screen which displays information such as signal strength, battery and Wi-Fi signal. There are three options you can choose from (all listed below). For status bar styles to work you must setup full screen mode.

1

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

Normal grey gradient style.

1

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

Solid black style.

1

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

Transparent black status bar.

Viewport Meta’s

The viewport Meta tags tells the device the width of the page to display, the minimum and maximum zoom value, the initial zoom value and the whether the user can zoom in and out.

1
2

<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" />

Clickable Numbers

Setup an anchor tag as you normally would only instead of a URL add “Tel:” then the number, when a user clicks the link it will call the number specified.

1

<a href="tel:079123456">079123456</a>

Pretty much the same as above only this time the link would create a new SMS message with number specified in the anchor tag.

1

<a href="sms:1-408-555-1212">New SMS Message</a>

Number Detection

If you have a number somewhere on your mobile website or mobile application, the apple device will auto detect it as being a phone number and apply a default link color to it. Using the Meta tag below disables this option.

1

<meta name="format-detection" content="telephone=no">

Conclusion

Thanks for taking part in this article, if you have any questions feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.