Tips for iPad Web Development

With Apple’s release of its iPad this week, many web developers have been preparing their websites to be compatible with the tablet device. With its lack of support for Flash, developers are being encouraged to use HTML5, and this article tells you some tips to get you started!

While Apple is touting HTML5 for their iPad, what they really seem to mean is the use of the <video> tag rather than Flash video, and their own CSS animations and transitions rather than traditional Flash applications. Aside from that, here are some tips to help your site work with the iPad.

• User-agent string – you can detect the iPad Safari user-agent, which shows up as such:
  

  Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10
  

  
  
• JavaScript iPad detection – with JavaScript, you can use the navigator.platform function to check for iPad as the user-agent, like so:
  

  function isIPad(){
      return navigator.platform == “iPad”;
  }
  

  
  
• Screen dimensions and orientation – an iPad’s screen resolution is 1024×768, and can also be detected using JavaScript’s screen.width and screen.height functions.
  
• mobile Safari – the iPad uses pretty much the same Safari as the iPhone and iPod Touch–the touch and gesture events work on the iPad the same as they do on other Apple devices.
  

Nicholas C. Zakas’ book, Professional JavaScript for Web Developers, 2nd Edition, covers the JavaScript functionality used in these examples and more for the advanced web developer.