Short Notes on Developing an iPad Version of a Website

This post was extracted from my early NetEase blog. NetEase Blog is no longer operating, but looking back, these words are still quite interesting, so I decided to move them over as intact as possible. It is mainly kept as a record; after all, it is from a long time ago, so the quality of the writing, images, and links may all be affected.

This post was originally published on July 5, 2011. I was about 22 years old at the time, in my 1st year of work.

During the morning meeting, I received a new task: developing an iPad version of a website. Although it was my first time developing one, I was still full of confidence, after all, there were not many new things.

Posting some tips collected today.

iphone/ipad are unusually fierce. Here I list some collected development tips for reference and use in projects, as follows:

Detect iPhone/iPod

When developing a mobile website for a specific device, the first thing to do is device detection. Below is using Javascript to detect the UA of iPhone/iPod, then redirecting to a dedicated URL.

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { if (document.cookie.indexOf("iphone_redirect=false") == -1) { window.location = "http://m.example.com"; } }

Although Javascript can run on fruit devices, users can still disable it. It also causes client-side refreshes and extra data transfer, so below is server-side detection and redirection:

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) { header('Location: http://yoursite.com/iphone'); exit(); }

Set the viewpoint and make it the same width as the screen

If you do not set the viewpoint, the website will display in the viewpoint as a scaled-down version. If you are developing a website specifically for iPhone/iPod, this one is very useful and also very simple. You only need to insert it into the head:

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

Use an iPhone-spec icon

If your users add your website to the home screen, iPhone will use the website thumbnail as the icon. However, you can provide an icon you designed yourself, which is of course better. The image is 57x57, in PNG format. You do not need to make rounded corners and reflection yourself; the system will automatically complete those. Then add the following line to the head:

<rel="apple-touch-icon" href="images/youricon.png"/>

Prevent automatic font-size adjustment when rotating the screen

-webkit-text-size-adjust is WebKit's private CSS:

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

Detect device rotation direction

iPhone can browse webpages in landscape mode. Sometimes you may want to know the handheld state of the user's device to enhance usability and functionality. The Javascript below can determine which direction the device has rotated and replace the CSS:

window.onload = function initialLoad() {updateOrientation();} function updateOrientation(){ var contentType = “show_”; switch(window.orientation){ case 0: contentType += “normal”; break; case -90: contentType += “right”; break; case 90: contentType += “left”; break; case 180: contentType += “flipped”; break; } document.getElementById(“page_wrapper”).setAttribute(“class”, contentType); }

CSS recognized only by iPhone

If you do not want device detection, you can use CSS media queries to define styles specifically for iPhone/iPod.

@media screen and (max-device-width: 480px) {}

Shrink images

Large images on websites are usually wider than 480 pixels. If you use the previous code to restrict scaling, these images will obviously exceed the screen when displayed on the iPhone version. Fortunately, the iPhone's performance is still enough, so we can use CSS to let iPhone automatically shrink large images for display.

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

Note that if the original image is very large, or a page has many images, it is best to scale it on the server side to 480 pixels wide. The iPhone only needs to shrink it to 320 pixels during normal browsing. This will not consume too much traffic or performance.

Hide the toolbar by default

The iPhone browser toolbar appears at the very top of the page and only hides after the webpage is scrolled. This makes it seem like a waste of space after the page finishes loading, especially in landscape screen. We can make it automatically scroll up.

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

Use special links

These two need no explanation, right:

<a href="tel:12345654321">Call me</a> <a href="sms:12345654321">Send SMS</a>

Simulate the :hover pseudo-class

Because the iPhone does not have a mouse pointer, there is no hover event. So the CSS :hover pseudo-class is useless. But iPhone has Touch events. onTouchStart is similar to onMouseOver, and onTouchEnd is similar to onMouseOut. So we can use it to simulate hover. Use Javascript:

var myLinks = document.getElementsByTagName('a'); for(var i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false); myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false); }

Then use CSS to add the hover effect:

a:hover, a.hover { /* your hover effect */ }

Designing a link this way can make it feel more like a button. Also, this simulation can be used on any element.

iphone fixed positioning

Regarding floating positioning, after testing I found that { position: fixed; } cannot be used for it,
but it can be changed to { position:absolute; } to achieve it. You can use an iPhone to view the DEMO: iphone-fixed-positioning

References:

iPhone CSS—tips for building iPhone websites

iPhone & iPod Detection Using Javascript

iPhone Development: 12 Tips To Get You Started

Tutorial: Building a website for the iPhone

hover pseudoclass for the iPhone

fixed-positioning-on-mobile-safari

Preparing Your Web Content for iPad