We are reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn more.

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.

[code type=html] [/code]

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

[code type=html] [/code]

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.

[code type=html] [/code]

Display Using Full Screen Mode

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

[code type=html]

[/code]

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.

[code type=html]

[/code]

Normal grey gradient style.

[code type=html]

[/code]

Solid black style.

[code type=html]

[/code]

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.

[code type=html]


[/code]

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.

[code type=html]
079123456
[/code]

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

[code type=html]
New SMS Message
[/code]

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.

[code type=html]

[/code]

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.