반응형

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




반응형

+ Recent posts