Apple - Specific Meta Tags & links for mobile web application

This post will describe about apple specific meta tags, links tags and when and how to use it in your website or mobile web application.

Introduction

The <meta> tag  are used to provide additional information (Metadata)  about the web page, most often to help search engines categorize them correctly when indexing. They are inserted into the Head section of the HTML document, but the information stored in the meta tag isn’t visible to a user visiting the site but it can be used by search engines & browsers to display content or reload page.

Usage of Meta Tags

Meta elements are typically used to specify page description, keywords, the content language, author of the document, last modified,technical formats,pointers to other files such as News Feeds and Fav icons and any other metadata not provided through the other head elements and attributes.

The following are some of the most important operations that we can done by using meta tags in iOS devices:

Enable Full Screen
It is used to set whether a web application runs in full-screen mode.

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

If content is set to yes, the web application runs in full-screen mode; otherwise, it does not.

Note:The content attribute must be defined if the name or the http-equiv attribute is defined. if none of these are defined, the content attribute cannot be defined.

Setting Status Bar Style

It is used to set the style of the status bar for a web application in iOS.

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

1) If you specify content as default, the status bar appears normal.

2) If you specify content as black, the status bar appears in black color.

3) If you specify content as black-translucent, the web content is partially obscured by the status bar and it appears in black color and translucent.

Phone number detection:

By default, Safari on iOS detects any string formatted like a phone number and makes it a link that calls the number.

You can enable or disable the  automatic detection of phone numbers in iOS safari  by using the following meta tag in your html file.

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

By giving telephone=no, to disable this feature and yes to enable this feature.

Changing viewport size:

Viewport meta key is used to set the width and height of the viewport. It is used to improve the presentation of page while displaying  on iOS.

Viewport meta key has supported the following six properties.

1) width :used to specify width of the viewport in pixels.

< meta name = “viewport” content = “width = device-width”>

device-width represents the width of the device in pixels.

2) height: used to specify height of the viewport in pixels.

3) initial-scale:  used to specify initial scale of the viewport.

< meta name = “viewport” content = “initial-scale = 1.0″>

4) minimum-scale: Specifies the minimum scale value of the viewport. The default is 0.25. The range is from >0 to 10.0.

5) maximum-scale: Specifies the maximum scale value of the viewport. The default is 5.0. The range is from >0 to 10.0.

6) user-scalable: Determines whether or not the user can zoom in and out.Set to yes to allow scaling and no to disallow scaling. The default is yes.

< meta name = “viewport” content = “width = 320, initial-scale = 2.3, user-scalable = no”>

Link Tags for Homescreen Icons

Apple provide the option to users to  save the page to home screen, While browsing online with safari an Apple device like iPhone, iPad, and iPod touch. This option is  used to access that page without having to launch their browser. By default, Apple will use the screen shot of the web page when creating a home screen icon, which often looks like a white square.

Apple also provided a option for site owners to  use their custom icon instead.

It can be achieved by using Apple touch icon. It is  very similar to favicon for Apple mobile devices. So you can set an Apple Touch Icon for your website just like you can set a favorite icon.

There are two kind of icons:

1)Icon with Glossy effect (Standrand Icon)

To use a standard icon, add the following link tag  into the head section of your website

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

2)Icon without Glossy effect (Precomposed Icon)

To use a precomposed icon, add the following link tag into the head section of your website

< link rel=”apple-touch-icon-precomposed” href=”" />

To include the different size of  apple touch icon:

< link rel=”apple-touch-icon-precomposed” sizes=”72×72″ href=”" />
< link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”" />
< link rel=”apple-touch-icon-precomposed” sizes=”144×144″ href=”" />
< link rel=”apple-touch-icon-precomposed” sizes=”512×512″ href=”" />
< link rel=”apple-touch-icon-precomposed” sizes=”1024×1024″ href=”" />

Link Tag  for Startup image (Splash screen):

A splash screen is an image that appears while page or program is loading. It may also be used to describe an introduction page on a website.

To implement the startup page in your website add the following link tag in your head section.

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

To include the Startup image with various sizes:

<!– iPhone –>

<link rel=”apple-touch-startup-image”  media=”(device-width: 320px)”

href=”apple-touch-startup-image-320×460.png”>

<!– iPhone (Retina) –>

<link rel=”apple-touch-startup-image”  media=”(device-width: 320px)

and (-webkit-device-pixel-ratio: 2)”  href=”apple-touch-startup-image-640×920.png”>

<!– iPad (portrait) –>

<link rel=”apple-touch-startup-image” media=”(device-width: 768px)

and (orientation: portrait)” href=”apple-touch-startup-image-768×1004.png”>

<!– iPad (landscape) –>

<link rel=”apple-touch-startup-image” media=”(device-width: 768px)

and (orientation: landscape)” href=”apple-touch-startup-image-748×1024.png”>

<!– iPad (Retina, portrait) –>

<link rel=”apple-touch-startup-image” media=”(device-width: 768px)

and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)”

href=”apple-touch-startup-image-1536×2008.png”>

<!– iPad (Retina, landscape) –>

<link rel=”apple-touch-startup-image” media=”(device-width: 768px)

and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)”

href=”apple-touch-startup-image-1496×2048.png”>

I hope this post will helpful for you.Thanks for your time.

Share it with your friends!

About these ads