When developing for the iPhone, iPad, iPod Touch and other mobile devices, the first thing we have to do is obviously detect it, so we can apply specific code or styles to it. The following code snippets will detect iPhones and iPods using various methods, depending on your situation you can use one or a combination of these methods.

JavaScript

Whether your developing a web application or just making a iPhone compatible version of your website it can be very beneficial to target specific JavaScript to help create a rich interactive UI.

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i) || (navigator.userAgent.match(/iPad/i))) {
        alert('Mobile Website');
}

PHP

For security reasons you may prefer to use PHP in order to detect iPhones, iPad and iPods touch on the server side.

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) {
    echo "Mobile Website";
}

CSS

Browser sniffing can be useful, but for many reasons it isn’t the best practice to detect a browser as there are many types of mobile device out there and you don’t want to have to target your code at every specific device. My preferred option is to target css to a device with and orientation with css, this can make design complicated as you have to think about how your layout will adjust however

If you’re looking for a cleaner way to apply CSS styles to the iPhone or small mobile devices only, you should use the following.

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

You can extend this technique to build a css file that adjusts for specifics width of device.

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

Device Orientation

You can even build css for device orientation. This example will draw the menu on the left when in landscape and on the bottom when in portrat.

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
	#menu {
		width : 100%;
	}
 
	#body {
		width : 100%;
	}
}
 
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
 
#menu {
		width : 30%;
		float : right;
	}
 
	#body {
		width : 70%;
		float : left;
	}
}

iPhone Images

Most website images are above 500 pixels wide. Due to the iPhone small size, there’s a strong chance that images will break out of the view aria. I recommend automatically re-size all website images to max 100% device width.

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

Defining a Viewport

The width=device-width statement allows you to define the document width as being the same than the width of the iPhone or mobile device screen.

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

Font Size

When you change device orientation, Safari and some other mobile browsers adjust the font size. If you’d like to prevent this effect, simply use the following CSS declaration.

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

Special Links

Finally do you remember those “mailto” link that were very popular some years ago? This prefix automatically open the default email client used by the person who clicked on it. The iPhone has introduced two similar prefixes, tel and sms, which allows the person who clicked on it to phone or text automatically.

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

And here it is:

img { -ms-interpolation-mode: bicubic; }

margin-top: 3.5em !important; margin-top: 2em

So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em. This can sometimes come in useful, especially when using relative margins (such as in this example) as these can display slightly differently between IE and other browsers.

<p class="text side"> Some Text </p>


Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

It is often nice to have your webpage span the full height of the window even if you only have a small amount of content displaying at the top.

With min-height hack	Without min-height hack

The Problem

This is easy in standards compliant browsers like Firefox with the CSS min-height property. However IE (Internet Explorer) 5 and 6 doesn’t understand the min-height property.

Although IE doesn’t understand the min-height it will treat height almost as though it were min-height and will expand an element that contains its content even though the height has been set.

Standards compliant browsers on the other hand will not expand an element past the set height. So height cannot be used as min-height.

Defining both height and min-height in the same element won’t work because height will override the Min-height in standards compliant browsers.

The Solution

That’s when I came across this nifty little hack. Thanks http://www.dustindiaz.com/min-height-fast-hack/

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

The Explanation

So how dose it work? Let’s break it down.

height:

• In standards compliant browsers height is a fixed height, non expanding “not more not less”
• In IE height will set a fixed minimum height but will expand with the element if it exceeds the set height.

min-height:

• In standards compliant browsers min-height is, a fixed minimum height. “I want it to be at least this height” and will expand with the element simpler to height in IE.
• IE doesn’t support the min-height property.

!important

• An !important declaration can be likened to an override. It allows you to declare an overriding property, which will be considered taking precedence even if there are other rules with the same specificity declaring.
• IE6 ignores !important.

height: auto !important;

Let the actual final height auto-adjust (while obeying the declared min-height, of course). Even though auto is the default for any element’s height, we want to declare it because of the following rule.

So standards compliant browsers will see:

min-height: 500px;
height: auto;

IE6, on the other hand, due to ignoring !important and not understanding min-height, will see:

height: 500px;

And there you go min-height that works in all modern browsers.