iOS Emulation for PhoneGap Using Chrome
Using Chrome For Mobile App Development
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.
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:
|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.
This article was authored using Markdown for Sitecore.