11 Apple Code-Snippets You Might Not Know About

Thinking about developing for an apple mobile device?, then you’ll find these code-snippets useful. 11 code snippets you might not know about.

In Blog, Mobile Development

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.

  1. June 20, 2012 at 8:02 AM

    Cheers for sharing these code snippets, some of them I didn’t know you could do but they will be a great help in the future. I’m currently developing a mobile website for a client and I believe that if I used some of these it would defiantly make it more effective. I never knew that you do the number detection to tell it not be a link. I normally just warped the number in a anchor tag and then styled it up from there.

  2. June 24, 2012 at 12:38 PM

    Hey great tips thank you! Apple’s newest specs for mobile development have really pushed websites to the next level. Along with coding in HTML5/CSS3/JS you can build some very powerful in-browser webapps.

  3. Wilma Hamlin
    June 24, 2012 at 8:15 PM

    Yes you can… I’m working on one myself :) glad you found this post useful.

    Thanks for your comment much appreciated

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 3 Comments On 11 Apple Code-Snippets You Might Not Know About, why not add yours!

Leave a Reply

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

Auto Scroll To The Top
css.php