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.

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.

👋 Hey Sitecore Enthusiasts!

Sign up to our bi-weekly newsletter for a bite-sized curation of valuable insight from the Sitecore community.

What’s in it for you?

  • Stay up-to-date with the latest Sitecore news
  • New to Sitecore? Learn tips and tricks to help you navigate this powerful tool
  • Sitecore pro? Expand your skill set and discover troubleshooting tips
  • Browse open careers and opportunities
  • Get a chance to be featured in upcoming editions
  • Learn our secret handshake
  • And more!
Sitecore Snack a newsletter by Fishtank Consulting

Meet Dan Cruickshank


Dan is the founder of Fishtank. He's a multi-time Sitecore MVP and Coveo MVP award winner. Outside of technology, he is widely considered to be a top 3 father (routinely receiving "Father of the Year" accolades from his family) and past his prime on the basketball court.

Connect with Dan