To target the iPhone with CSS, use:

The logic of this is that only browsers that understand screen understand only, and of these, only the iphone has a max-device-width of 480px. The reason for the anti-IE comments is that some versions of IE render CSS regadless of media type declarations.

To target the iPhone server-side with PHP you can use:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'iPhone')) {}

:hover pseudoclass on the iPhone

iPhone Viewport Orientation

The iPhone supports both landscape and portrait views. You can specify CSS based on viewport orientation which you determine via javascript and update the orient attribute of the body element. Target the browser with body[orient="landscape"] or body[orient="portrait"]

iPhone ViewPort Orientation JavaScript

The following javascript snippet detects and sets the iPhone’s viewport orientation by evaluating the innerWidth property of the window object and setting the orient attribute of the body element at regular intervals:

Hiding the iPhone toolbar

With one line of JavaScript you can hide the big toolbar: window.scrollTo(0, 1); . Include this line of code to your snippet of detecting the phone’s orientation, as the toolbar will reappear when the orientation is changed. Remove it from the snippet above if you want the toolbar to show.

iPhone Viewport Meta Tag

The viewport meta tag properties include width, height, initial-scale, user-scalable, minimum-scale and maximum-scale. The height is calculated based on the width and aspect ratio. The initial-scale is the scale to render when the page first loads; with the default to fit the screen. Unless user scalable is set to no, th user can change the scale through pinching and double tapping of the iPhone.

The iPhone automatically adjusts font size for readability. This feature can be overridden with -webkit-text-size-adjust. The values for -webkit-text-size-adjust are none (default) | auto | %value.

Note that if you have a web page designed for the desktop that is wider than 980px, you will always have scrolling on the iPhone. The solution? For example, if your the site is 1060px wide, iPhone’s Safari only scales up to 980px: this will cause a small amount of zooming. In this scenario, the simple fix of <meta name="viewport" content="width=1060" /> will fix it all.

Comparisons of Safari on the desktop versus the iPhone.

Safari on iPhone supports:

Safari supports cookies on both

Safari on iPhone allows up to 8 user initiated browser pages to be open at once.

Default user preference is set to block pop-up windows.

Safari on iPhone supports many MIME types and rich media, including PDF and media file types

Other than the :hover pseudoclass which isn’t supported on the iPhone since mouseover effects aren’t supported, Safari on the iPhone supports CSS1, CSS2 and several selectors and attributes of CSS3. If you do want to include a hover pseudo class, check out: hover pseudoclass for the iPhone.

Safari on iPhone does not support:

Events:mouseover and mouseout, including :hover styles and tool tips, (but it does support onclick and event listeners). Safari on the iPhone does not support the document events of onkeydown, onkeypress and onkeyup, the form-field events of ondblclick, onmouseenter, onmouseleave, onmousemove, and onSelect, and the window events of onresize and onScroll. This is not an exhaustive list, so test your event handlers before listening to me.

window.showModalDialog()

Plug-ins: Flash or Java, and plug-in installations. Do not ask users to download Flash.

File-size: Non-streaming files of over 10MB. CSS, JavaScript and HTML files are limited to 10MB per file. JavaScript is limited to 5 seconds of execution time. Safari for the iPhone does support gzip compression, so compress!

The iPhone does not support gifs, png or tiffs over 8 MB and jpgs over 128 MB (but does support larger streaming media files).

You can use iFrames, but avoid framesets.

Other iPhone Safari features

Phone numbers are automatically converted to phone links. You should convert them instead of letting Safari control it for you.

47 Responses to Web Development for the iPhone

“You can specify CSS based on vieport orientation with the dynamically changed orient attribute which Safari for the iPhone adds dynamically to the body element. Target the browser with body[orient=”landscape”] or body[orient=”portrait”]”

This application allows you to use your iPhone for Web Developing. You can View Source, Find on Page, Outline Divs & Tables, etc. Similar to the Firefox Web Developer Extension. Simply drag bookmarks into the web browser that you have your iPhone or iPod Touch synced to and you’re good to go. Works on any site.

Let me know what you think. If you have stuff you want added just let me know.

Note the body:first-of-type selector is a great way to target safari only. I go over that hack in my other blog post. Just wanted to re-mention it though, since i used it mercilessly in the last iPhone app i did, and it worked fabulously.

On thing that you may want to consider is writing your application using HTML, CSS, and JavaScript but making it installable. You could then use AJAX to connect this rich app to your server.

I wrote a framework that lets you do this without knowing any Objective-C. It does a lot such as:
– vibrate the phone
– get the GPS location
– give you access to the accelerometer data
– store data on the device with a wrapper to SQLite. This is both browser and non-browser based so you could ship data with your application if you choose.
– play system sounds
– record and playback audio files
– show and get the data from the native date and date/time pickers not just the one that is shown when the user selects an HTML pulldown
– Embed Google Maps in the application.

All of this is accessible from JavaScript calls and Bonjour Networking and service discovery is going to be in the next beta within a week.

Much more is planned for this framework so if you want to use your web skills and create installable iPhone applications this is something you should check out.

First. if you are making features that you want to work ONLY on iPhone OS devices, then consider that you don’t want to detect ONLY the iPhone. You want to detect both the iPhone and iPod Touch. So you would need to adjust your device detection algorithms.

I wrote a great PHP library for detecting mobile devices. (Also available in JavaScript, Java, and ASP.NET). The code is free, easy to modify, regularly updated, and available at:

The second thing to consider is that if you’re going to go through all the trouble of creating an iPhone-optimized version of your site, then why not let it do triple duty on Android and Palm Pre (WebOS) devices, as well? These devices are also WebKit-based and iPhone optimized sites typically function equally as well on them. As a result, note in my code a simple API call for DetectTierIphone(), which will return a simple True or False for similarly-capable devices.

Does anyone know if it is possible to configure a web page so that Safari selects the text in an input field when you “next” to it (like a normal browser selects the text when you tab to the field) or to automatically activate the number key pad when entering am input field?

Webkit supports the HTML5 input types. If you use input type=”tel” you’ll get a number pad, if you put type=”url” you’ll get the URL keyboard, etc. If you use the number type, you’ll get the number keypad.

Wow. You’ve put a lot of work into laying out all the details. Great post, I still have a few specific questions about developing for the iPhone, but I’m going to go back and check out some of the suggestions made by some commenting in the thread.

@Alfred
while I don’t think that will run down your battery too quickly, you’re right, it is no longer necessary. You can use media queries to determine orientation for changing the css based on orientation, or with js if you need to for js reasons.

This post was written in 2007, when the first iPhone first came out. Back then the media query for orientation was not supported. It is now. I think i included that in the slide show attached — which was done in 2010.

One should never use [if !iE] as a conditional comment. If there are “…some versions of IE render CSS regadless[sic] of media type…” then target those versions in your conditional comments. IE9 supports media queries. Use [if lt IE 9] instead. Windows Phones are getting IE9 in Fall 2011 with a screen resolution of 480px x 800px.

Targeting specific browsers and platforms is not good web dev practice. We’re supposed to be using these things called “web standards”. Now we’re back in the 90s again… “if IE do this, if Netscape do this”.