iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more

http://www.mobilexweb.com/

iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more

The new main version of the Apple’s iOS is with us, along with the new iPhone 5 and the iPod Touch fifth generation. As every big change, lot of new stuff is available for HTML5 developers and -as always- no much official information is available.

Quick review

I’m going to divide this post in two parts: iPhone 5 and iOS 6 new stuff.

On iPhone 5:

• New screen size
• New simulator
• What you need to do
• Problems

New features on iOS 6:

• File uploads and camera access with Media Capture and File API
• Web Audio API
• Smart App Banners for native app integration
• CSS 3 Filters
• CSS 3 Cross Fade
• CSS Partial Image support
• Full screen support
• Animation Timing API
• Multi-resolution image support
• Passbook coupons and passes delivery
• Storage APIs and web app changes
• Web View changes for native web apps
• Debugging with Remote Web Inspector
• Faster JavaScript engine and other news

Device detection

At the time of this writing there are no iPhone 5 on the street yet. However, as far as every test I could check, there is no way to detect iPhone 5 server-side. The user agent only specifies an iPhone with iOS 6, and the same exact user agent is being used for iPhone 4S with iOS 6 and iPhone 5.

Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

Therefore, the only way to detect the presence of a 4″ iPhone device is to use JavaScript and/or media queries, client-side. If you need to know server-side, you can plant a cookie from client-side for next load. Remember that these devices have 1136 pixels height, but in terms of CSS pixels (independent resolution pixels) we are talking about 568 pixels-heightas these devices have a pixel ratio of 2.

isPhone4inches = (window.screen.height==568);

Using CSS Media Queries and Responsive Web Design techniques,we can detect the iPhone 5 using:

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 or iPod Touch 5th generation */
}