How to Use Device Mode in Google Chrome (Step-by-Step)

Chrome device mode lets you simulate how a website looks and behaves on phones, tablets, and other screen sizes without leaving your desktop browser. It lives inside Chrome DevTools and takes about ten seconds to open once you know where to look. If you build or maintain websites, it's one of the most practical tools in your testing workflow.

I use Chrome device mode on every client site before a launch or after a layout change. It doesn't replace testing on real hardware, but it catches the majority of responsive issues before any hardware is involved.

As of 2024, mobile devices account for roughly 62% of global web traffic, according to Statcounter Global Stats. If your site hasn't been tested at common mobile viewport sizes, a significant portion of visitors may be seeing a broken or misaligned layout. For client site builders using WordPress hosting or custom stacks on VPS hosting, device mode is where you start before any real devices come into play.

How Do You Open Device Mode in Chrome?

Chrome device mode is accessed through Chrome DevTools. Open DevTools with Ctrl+Shift+I on Windows or Cmd+Option+I on macOS. Once DevTools is open, click the Toggle device toolbar icon (the phone/tablet icon in the top-left of the DevTools panel), or press Ctrl+Shift+M on Windows or Cmd+Shift+M on macOS.

The viewport will shift into a mobile simulation view with a device control toolbar at the top of the page.

Unlike Firefox's responsive design mode, which opens directly with a single keyboard shortcut, Chrome requires opening DevTools first. It adds one step, but the range of simulation and throttling options once you're inside is broader.

How Do You Choose a Device to Simulate?

Click the device dropdown in the toolbar at the top of the page. Chrome includes presets for a wide range of devices: iPhone models, Samsung Galaxy phones, Google Pixel phones, iPads, and common laptop widths. Selecting a preset adjusts the viewport dimensions, device pixel ratio (DPR), and touch input simulation automatically.

Along the top bar, there are also quick-access presets for the most common breakpoints:

• Mobile S (320px)

• Tablet (768px)

• Laptop (1024px)

These are useful when you need to check a CSS breakpoint quickly without picking a specific device model.

How Do You Set a Custom Viewport Size?

Click directly into the width or height field at the top of the device toolbar and type the value you need. When either field is focused, you can also use the up/down arrow keys to increment or decrement by 1px, which is useful for finding exactly where a layout breaks.

This comes in handy when a client has specified a particular viewport requirement, or when you're debugging a breakpoint issue at a non-standard size.

How Do You Test on a Slow Connection?

Click the throttling dropdown (it shows "No throttling" by default). The available presets are:

• Mid-tier mobile: slowed CPU and network

• Low-end mobile: significant CPU and network slowdown

• Offline: no network connection

Running a throttled test before launch is worth doing for any client site. A page that loads in under two seconds on a fast desktop connection can take six to eight seconds on a low-end mobile device. This is where hosting infrastructure matters: VPS hosting and NVMe-backed plans load faster under real-world conditions, but well-optimized assets (compressed images, minified CSS) are equally important.

How Do You Switch Between Portrait and Landscape?

Click the Rotate icon in the device toolbar. Device mode respects CSS orientation media queries, so this is the fastest way to confirm that your landscape layout works correctly. Many responsive layouts look fine in portrait but have issues in landscape at smaller screen heights.

What Extra Options Are in the Three-Dot Menu?

Click the three-dot menu in the device toolbar for additional controls:

Show device frame wraps the viewport in a visual device outline. Useful for client presentations or screenshots where you want the device context visible.

Show rulers displays pixel rulers along the top and left edges of the viewport. I use this when checking above-the-fold height on specific devices: knowing that an iPhone SE shows roughly 548px of vertical space helps you confirm that your headline and primary CTA sit above the fold.

Add device pixel ratio adds a DPR control to the toolbar (1x, 2x, 3x). This matters if you're using srcset for responsive images and want to check which image resolution is being served.

Add device type lets you switch between touch and mouse input simulation: Mobile, Mobile (no touch), Desktop, and Desktop (touch). This is relevant when testing hover states, touch event handlers, and anything that behaves differently between pointer types.

Capture screenshot saves a screenshot of the current viewport. Capture a full size screenshot saves the entire scrollable page.

Both are useful for sharing layouts with clients or documenting layout issues for your team.

How Do You Zoom the Viewport?

The zoom control in the toolbar sets the zoom level for the simulated viewport: 50%, 75%, 100%, 125%, and 150%. There's also an "Auto" option that adjusts the zoom so the entire simulated viewport fits within your DevTools panel. This is helpful when simulating a large desktop viewport on a smaller monitor.

Does Chrome Device Mode Replace Real Device Testing?

No. Chrome device mode accurately simulates viewport dimensions, device pixel ratios, and touch input, but it doesn't replicate how a device's operating system renders fonts, how Safari on iOS interprets certain CSS properties, or how actual touch gestures behave on a physical screen.

For serious quality assurance, test in Firefox, Edge, and Safari as well as Chrome, and verify on at least one real iPhone and one Android device before a client launch. Device mode is the right tool for rapid iteration and catching issues early. It's not the final word.

Conclusion

Chrome device mode is one of the most practical tools in your testing workflow. The ability to jump between device presets, simulate throttled connections, and capture screenshots saves real time on every responsive build and client review.

If you build and manage websites for clients, pairing good development tools with reliable hosting infrastructure keeps your projects running without interruption. Verpex Reseller Hosting gives developers and agencies one WHM and cPanel dashboard to manage up to 100 client accounts, with white-label branding, custom nameservers, and daily backups included on every account.

Frequently Asked Questions