Ivan W. Lam | iPhone Basic < Archives

Summary

Test out an iPhone-only stylesheet. The iPhone is special in that it doesn't take "handheld" stylesheets, so it must be customed. A PHP script is perfect to adjust the display of the stylesheet on the server's side so no JavaScript is involved.

Example

Try this on different systems. Three statements are written, but only two are shown at any one time.

iPhone browsers only!

All browsers can read this.

Only screen browsers can read this.

Date Created

14 Nov 2008.

Help

Web Development for the iPhone :: CSS, JavaScript and XHTML Explained: helped me pinpoint the stylesheet to the iPhone and use PHP to reinforce that.

Process

Trial and Error. The link tag didn't seem to work, so I used PHP to set it. Tested out on my sister's iPhone for I don't have one.

Test page.

The Code

Here’s the code. Please link back here if you’re using it.

PHP
CSS
HTML

Put this PHP in the head tag.


if (stristr($_SERVER['HTTP_USER_AGENT'], "iPhone")) {

    echo '<link media="only screen and (max-device-width: 480px)" href="iPhone01.css" type="text/css" rel="stylesheet" />';

    } else {

    echo '<link media="screen" href="screen01.css" type="text/css" rel="stylesheet" />';

    }

Put this CSS in iPhone01.css


#screenOnly{

display:none;

}

Put this HTML in the body tag.


<div id='iPhoneOnly' >iPhone browsers only!</div>

<div id='all' >All browsers can read this.</div>

<div id='screenOnly' >Only screen browsers can read this.</div>