Hero Background

Next-Gen App & Browser Testing Cloud

Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles

Next-Gen App & Browser Testing Cloud

How to Request Mobile Site on Chrome?

To request the mobile site on Chrome desktop, open DevTools with F12 and press Ctrl+Shift+M to enable the device toolbar, then pick a phone preset such as iPhone or Pixel. On Chrome for Android, tap the three-dot menu and uncheck Request desktop site so the page reloads in its mobile layout.

What Does Request Mobile Site Mean?

Requesting the mobile site means asking a website to serve the layout it would show to a smartphone rather than the wider desktop layout. Websites decide what to serve in two ways: responsive design changes the layout based on the viewport width through CSS media queries, while adaptive or dynamic serving inspects the browser user-agent header and returns a different HTML build for mobile devices.

Because of these two mechanisms, there is no single button that always works. On desktop Chrome you emulate a phone with DevTools device mode and optionally spoof the user agent, while on Android Chrome you toggle the built-in Request desktop site option. Understanding which technique a site uses is the key to reliably seeing its true mobile experience.

View the Mobile Site via Chrome DevTools Device Mode

Device mode is the fastest and most reliable way to preview the mobile layout on a computer. It resizes the viewport, applies a device pixel ratio, and can emulate touch, so responsive sites immediately reflow into their mobile design.

  • Open Google Chrome and navigate to the page you want to inspect.
  • Press F12, or right-click the page and choose Inspect, to open DevTools. You can also open the three-dot menu, hover More tools, and choose Developer tools.
  • Click the Toggle device toolbar icon in the top-left corner of DevTools, or press Ctrl+Shift+M (Cmd+Shift+M on Mac). The icon turns blue when active.
  • From the device dropdown at the top of the viewport, select a preset such as iPhone, Pixel, or Galaxy, or choose Responsive to drag the edges to any size.
  • Reload the page so the site re-evaluates its layout and, if applicable, receives the emulated device user agent.

This approach is ideal for checking breakpoints and confirming that CSS media queries fire correctly. For a deeper walkthrough of responsive checks, see how to check responsive websites in Chrome.

Change the User-Agent String to Mobile

Some sites ignore viewport width and decide what to serve purely from the user-agent header. For these adaptive sites, resizing the window is not enough; you must send a mobile user agent. Chrome lets you override it from Network conditions.

  • Open DevTools, click the three-dot menu inside DevTools, hover More tools, and choose Network conditions.
  • Under User agent, uncheck Use browser default.
  • Pick a mobile agent from the list, or select Custom and paste a mobile string.
  • Reload the page so the server receives the new request header and returns the mobile build.

A typical Android Chrome user-agent string looks like this:

Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36

Note the word Mobile in the string. That token is what most server-side detection scripts look for when deciding whether to send the mobile version of a page.

Request Mobile or Desktop Site on Chrome for Android

On a real phone, Chrome for Android exposes a direct toggle. Chrome offers three behaviors: Default view (Chrome chooses based on screen size and device memory), Mobile site (always request the mobile version), and Desktop site (always request the desktop version).

  • Open Chrome on your Android device and load the page.
  • Tap the three-dot menu in the top-right corner.
  • If Request desktop site is checked, tap to uncheck it and Chrome reloads in the mobile layout.
  • For a permanent preference, go to Settings > Site settings > Desktop site and add per-site exceptions as needed.

Using the Responsive Device Toolbar

Within device mode, choosing Responsive from the device dropdown gives you a resizable frame instead of a fixed preset. Drag the handles or type exact pixel dimensions to test arbitrary widths, rotate between portrait and landscape, and adjust the device pixel ratio and throttling. This is the best way to find the exact breakpoint where a layout breaks and to confirm your media queries behave across the full range of screen sizes. To validate breakpoints more broadly, review how to make CSS code responsive.

Common Mistakes and Troubleshooting

  • Expecting emulation to change the user agent by itself: device mode mainly changes the viewport. If a site serves by user agent, override it in Network conditions and reload.
  • Not reloading after switching devices: the server only sees a new request when you refresh, so a stale desktop page keeps showing until you reload.
  • Cached desktop layout: a previously cached response can mask the mobile version; do a hard reload or clear the cache.
  • Confusing width-based and UA-based sites: resizing works for responsive sites but not for adaptive ones that key off the header.
  • Trusting emulation as final proof: DevTools renders with your desktop engine, so subtle mobile rendering or touch issues can slip through.

Conclusion

Requesting the mobile site on Chrome is straightforward once you match the method to the site. Use DevTools device mode and Ctrl+Shift+M for responsive previews, override the user agent for adaptive sites, and toggle Request desktop site on Chrome for Android. Since these are all approximations, confirm the important flows on real devices before you ship, so your users get the mobile experience you intended.

Frequently Asked Questions

What is the keyboard shortcut to request the mobile site view in Chrome?

Open Chrome DevTools with F12 (or Ctrl+Shift+I on Windows, Cmd+Option+I on Mac), then press Ctrl+Shift+M to toggle the device toolbar. This instantly switches the viewport into mobile emulation, where you can pick presets like iPhone, Pixel, or Galaxy from the device dropdown.

Does Chrome's device mode change the user agent sent to the server?

By default device mode resizes the viewport and can send a mobile user agent for the selected preset, but only after a reload. For full control, use More tools > Network conditions, uncheck automatic selection, set a custom mobile user-agent string, then refresh so the server receives it.

How do I request the mobile site on Chrome for Android?

Open Chrome on Android, tap the three-dot menu, and if Request desktop site is checked, uncheck it to return to the mobile version. Chrome reloads the page and requests the mobile layout. You can also set a global preference under Settings > Site settings > Desktop site.

Why does the site still look like desktop after switching to mobile view?

Common causes are a cached desktop layout, a site that serves content by user agent rather than viewport width, or DevTools not reloading after you changed the device. Reload the page, clear the cache, and confirm the correct user agent is being sent for the emulated device.

Is Chrome device mode the same as testing on a real phone?

No. Device mode emulates viewport size and can spoof the user agent, but it renders using your desktop Chrome engine, GPU, and fonts. It cannot reproduce touch behavior, mobile GPU limits, or OS-specific rendering, so final validation should happen on real devices.

Can I test the mobile site across many devices without owning them?

Yes. A real device cloud such as TestMu AI lets you open your URL on thousands of genuine Android and iOS devices in Chrome and other browsers, so you see true rendering, touch, and network behavior instead of desktop emulation.

Related Questions

Test Your Website on 3000+ Browsers

Get 100 minutes of automation test minutes FREE!!

Test Now...

KaneAI - Testing Assistant

World’s first AI-Native E2E testing agent.

...

TestMu AI forEnterprise

Get access to solutions built on Enterprise
grade security, privacy, & compliance

  • Advanced access controls
  • Advanced data retention rules
  • Advanced Local Testing
  • Premium Support options
  • Early access to beta features
  • Private Slack Channel
  • Unlimited Manual Accessibility DevTools Tests