CSS, JavaScript and XHTML Explained

Web Development for the iPhone July 8, 2007

Web Development for the iPhone: Targeting the iPhone Safari browser

Developing for the iPhone

• The Safari iPhone user agent string is:
  Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+
(KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
• Platform string: (iPhone; U; CPU like Mac OS X; en)
• Version string: Version/3.0 Mobile/1A543a Safari/419.3

To target the iPhone with CSS, use:

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

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 (stristr($_SERVER['HTTP_USER_AGENT'], '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:

var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};

iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 500);

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.

Examples:

<meta name="viewport" content="initial-scale=2.3, user-scalable=no" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

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.

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
• Images: Safari supports .gif, .jpg, .png, and .tiff
• Fonts: The iPhone comes with American Typewriter, Arial, Arial Rounded MT Bold, Courier, Courier New,Georgia, Helvetica, Helvetica New, Marker Felt, Times New Roman, Trebuchet MS, Verdana, and Zapfino; so that’s what Safari on the iPhone supports.
• 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

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.
<a href="tel:4155551212">415.555.1212</a>.

Notes:

• Check out the application we (Ryan, Richard, Seto and I) developed at iPhoneDevCamp - PickleView - http://mxis.com/pickleview.
• I don’t own an iPhone. Feel free to send me one! :)