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 the 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 an iPad and iPhone emulator.

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.


This article was authored using Markdown for Sitecore.