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 */
}
