The Quickest Way to Test a Mobile Layout on Your Computer

Justin | design,HTML5,interaction,tips | Wednesday, March 9th, 2016

hero_device_emu

There are several great tools for testing mobile layouts.

The iOS and Android Simulators can test almost every aspect necessary, without actually needing a device.

Browserstack is a subscription service that lets you test all kinds of devices, browsers, and operating systems.

However, sometimes the power that these systems offer is overkill, and I just need a quick way to test a mobile layout.

The Quickest Way to Test a Mobile Layout

Enter Chrome Device emulation.

Device emulation is part of the Chrome Developer Tools. All you need is the Google Chrome web browser.

You can learn more about the Developer Tools, including how to use them as a designer in this free email course.

There are 2 important parts to testing mobile layout.

  1. The viewport meta tag—this controls document scaling on mobile devices.
  2. The CSS media queries—these are rules that control how the design changes on different screens.

The emulator also simulates touch events, touch scrolling, and device orientation.

Using Device Emulation Mode

The Chrome Developer tools can be accessed via View > Developer > Developer Tools.

(Or right-click on any element and choose Inspect Element).

Once inside the Developer Tools, hit the Toggle Device Emulation Mode button.

device mode toggle

Tip: You may want to reload the page once in device emulation mode, just to ensure that the emulation takes full effect.

With this tool in place, you can test a mobile layout in a matter of seconds.

There’s even a quick list to test pixel dimensions for specific devices.

chrome device emulation quick list

To learn more about solving web problems with the Chrome Developer tools, check out the  Eureka: More Web Problems Solved course.

Eureka! More Web Problems Solved

These FREE email lessons will deliver solutions to your inbox over 3 weeks and share techniques with you to solve the toughest of web problems.

We respect your privacy. Powered by ConvertKit

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *