We do a fair bit of iOS development. Often we’ll leverage the Cordova / PhoneGap platform and a few tricks to jack up the performance of the WebViewUI.
And when using Cordova / PhoneGap, our development starts in a web browser and finishes in XCode. We always need to get our hands dirty in XCode for the tricky bits. But the more work we can keep in a web browser, the easier it is for the team.
- Reduces tools used by development team
- Quicker turn around between writing & testing code
- Easier debugging
- Easier to distribute tasks
So in a recent release of Chrome, I was quite happy to see device emulation added to the developers console. Specifically iPhone and iPad emulation.
Find Developers Tools > JavaScript Console
Find Developers Tools > JavaScript Console > Emulation > Devices
iOS devices get grouped as follows:
- iPad 1 / iPad 2 / iPad Mini
- iPad 3 / iPad 4
- iPhone 3GS
- iPhone 4
- iPhone 5
Chrome is not a replacement for XCode’s iOS Simulator but Chrome emulates some very useful things for us:
| Property | Description |
|---|---|
| Viewport | The viewport reflects the screen size of the device |
| Pixel Density | Modern iOS devices have a higher pixel density than the typical desktop monitor. For example, the same icon is 100x100 on iOS and 50x50 on a desktop. |
| User Agent | Device-specific User Agent override the default |
| Touch | Touch events are emulated in place of click events |
| Geolocation | Use a specific LAT LONG or toggle position unavailable |
| Accelerometer | Simulate motion and device orientation with alpha, beta & gamma states |
| Text Autosizing | Fonts sizes (especially REM sized fonts) are scaled appropriately |
I find Touch, Viewport, Pixel Density and Geolocation emulation are very useful in day-to-day development and allow for a high-degree of confidence when developing iOS apps.
Compare these two screens of an app I’m currently working on. One is Emulation in Chrome and one is the iOS Simulator.
iPad 4 (Retina) Emulation In Chrome
iOS 7 iPad 4 (Retina) In iOS Simulator
You can see the Viewport size, positioning of elements & pixel density are dead-on. And take my word for it, might Touch-based swiping events work as well.
Even without access to XCode’s iOS Simulator, Chrome’s Emulation allowed someone to flesh out a very accurate app screen.
That said, Chrome and iOS do have slightly different renderings of the same font. And Chrome doesn’t emulate the virtual keyboard that appears on input:focus in iOS, but it’s very good for free.
None of these are strikes against Chrome, just things to be aware of.
Enjoy!
This article was authored using Markdown for Sitecore.
