iphone enable website codes

Creating iPhone and other mobile devices enable websites are challenging task.
It needs extra coding as well as scaling images.

Such as:

<link rel=”apple-itouch-icon” href=”/apple-touch-icon.png” />

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

Scaling the entire site: Set the viewport to be the width of the iPhone

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Scaling size: width, height and scale values

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

To set the status bar style:

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

There are some useful  JavaScript codes as well.

This will detect iPhones and iPods using Javascript, and redirect those users to an iPhone specific page.

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf(“iphone_redirect=false”) == -1) {
window.location = “http://m.espn.go.com/wireless/?iphone&i=COMR”;


Separate CSS:


@media only screen and (max-device-width: 480px) {
.navigation {
display: none;

To use separate CSS for iPhone for windows users:


<!–[if !IE]>–>
<link media=”only screen and (max-device-width: 480px)”
rel=”stylesheet” type=”text/css” href=”iphone.css”/>


Auto resizing images:
@media screen and (max-device-width: 480px){
Applying CSS styles to iPhones/iPods only:

@media screen and (max-device-width: 480px){
/* All iPhone only CSS goes here */


Preventing the iPhone from resizing text on rotation

html, body, p, div, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;

Hiding Safari Toolbar:

window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);

Adding special links:
<a href=”tel:12345678900″>Call me</a>
<a href=”sms:12345678900″>Send me a text</a>