Can you trust Chrome’s Emulator for your responsive design testing?

Chris Strahorn Technical Brief

Last Updated January 26, 2018.

Mobile1st offers mobile optimization services to increase your mobile website’s revenue/conversion by decreasing your shopping cart abandonment rate, reducing your page load speed, improving mobile UX and SEO, analyzing your mobile analytics, and more. Our team of mobile experts analyzes and improves your website across 35+ factors, A/B tests ideas, and can even (optionally) implement the design/code changes.
Get a mobile audit of your website today!

If you’re not focused on mobile, you’re losing money. It’s that simple. If you need a wakeup call, check out these staggering statistics on the growth of mobile. The design community has been beating the Mobile First drum for a couple of years now, but development and quality assurance teams are still lagging behind to put responsive design testing first in their processes and tools.

Fortunately, there’s a new tool in the tool belt that Google’s providing with Chrome’s built-in emulator.

Starting with the Chrome Emulator

Turn on Device Mode to change device settings. Bring up Chrome’s Developer Tools panel from the menu (View-> Developer -> Developer Tools) or shortcut key (Cmd+Opt+I on the Mac or Ctrl-Shrift+I on the PC.)

Screen Shot 2014-10-22 at 6.59.37 AM

It’s a very simple tool and easy to use, but if you need more details check out Google’s directions.

Chrome Emulator’s Basic Defect

As with any mobile browser emulator, there are three primary factors that determine how closely the website will render to the real physical device.

  1. Screen size – simple enough, this is the size of the viewport to render the website
  2. Supplied User Agent – this is the browser’s way of telling a website about itself to retrieve the most appropriate HTML
  3. Rendering Engine – this is the code the browser uses to interpret the HTML/CSS and create what we see in the browser.

An emulator can solve #1 and #2 assuming the dimensions of the screen and User Agent is accurate for the device. To solve #3, you’ll have to test on the physical device by either owning the device or having virtual access to a mobile device testing lab.

Examples of Chrome Emulator Misfires

Below are two examples of where Chrome’s emulator didn’t match the real device:

Chrome Device Emulator                                    Real Device Screenshot


Notice the button on the right splits and appears on two lines.

Chrome Device Emulator                                           Real Device Screenshot


Notice the video in the emulator does not appear in the real device screenshot.

These two examples of Chrome’s emulator failing to match the real device rendering are not uncommon. There’s no doubt Google Chrome’s Device Mode Emulator can speed up the development and the QA cycle. However, the final testing of your responsive design definitely needs to be performed on a real device.

Need to test your website’s display on actual mobile devices for 100% accurate test results? Start your free trial of Mobilizer. With this online mobile testing lab, you can easily inspect your website’s display across 17 actual smartphones and tablets within seconds – right from your desktop browser.

Contact Mobile1st Experts Now!

Increase revenue and customer engagement with Mobile1st. Easily identify display issues, monitor mobile performance metrics, and optimize the customer experience.