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.
- The viewport meta tag—this controls document scaling on mobile devices.
- 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.
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.
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.