Switching between desktop and mobile view in Chrome

Yes, Chrome on a Mac can show the mobile version of a website, but the switch is not in the normal menus. It lives in Chrome's developer tools. Press Cmd+Option+I to open DevTools, then Cmd+Shift+M to toggle Device Mode, pick a phone from the Dimensions list at the top of the page, and reload. The page now renders at phone width, and with a phone preset Chrome also tells the site it is a phone. Close DevTools and the tab goes back to the desktop view. The rest of this page covers what that switch really changes, why some sites still refuse to show their mobile layout, and the cases where a different approach works better.

The short version, step by step

Chrome's documentation lists the shortcuts in its guide to opening DevTools: on a Mac, Cmd+Option+I opens the last panel you used, Cmd+Option+J opens the Console and Cmd+Option+C opens Elements in inspect mode. Any of the three works as a starting point. The DevTools keyboard reference lists Toggle Device Mode as Command+Shift+M on a Mac.

1. Open the page you want to see as a phone would.
2. Press Cmd+Option+I. DevTools opens beside or below the page.
3. Press Cmd+Shift+M, or click the phone and tablet icon labeled Toggle device toolbar in the action bar at the top of DevTools.
4. A toolbar appears above the page. Its Dimensions list starts on Responsive. Choose a named phone instead.
5. Reload with Cmd+R. Some sites decide between layouts only when the page first loads.
6. To leave, press Cmd+Shift+M again, or simply close DevTools.

If you only need to see how a layout reacts to a narrow screen, Responsive is enough. The Device Mode documentation shows a row of width presets under the toolbar: Mobile S at 320px, Mobile M at 375px, Mobile L at 425px, Tablet at 768px, Laptop at 1024px, Laptop L at 1440px and 4K at 2560px. Click one and the viewport jumps to that width.

What the switch actually changes

People search for this with one thing in mind, but a site can decide what to show you in two different ways, and Device Mode touches both only if you set it up that way.

Width. Most modern sites are responsive. They read the width of the window and rearrange themselves with CSS media queries. For these, the narrow viewport is the whole story. Responsive mode at 375px will show you the same layout a phone gets.

Identity. Some sites read the user agent string, the line every browser sends to say what it is, and serve a different page to phones. Narrowing the window does nothing for these; you get a squeezed desktop page. Choosing a named phone from the Dimensions list helps, because device presets can carry a phone user agent. If it still does not switch, set the identity directly.

Touch. Chrome's documentation describes a Device Type setting with four options. Mobile renders as a mobile viewport, shows a round touch cursor and fires touch events. Mobile (no touch) renders mobile but fires normal clicks. Desktop and Desktop (touch) are the reverse pair. If the list is not visible, it is under More options, Add device type. This matters for menus that open on tap and behave differently with a mouse.

What the site checks	What to change in Chrome	Where
Window width	Responsive width or a width preset	Device toolbar
User agent	A named phone, or a custom user agent	Dimensions list, or Network conditions
Touch support	Device Type set to Mobile	More options, Add device type
Screen density	Device pixel ratio	More options, Add device pixel ratio

When the site still shows the desktop version

If a site ignores the narrow viewport and the phone preset, override the user agent by hand. The DevTools page on overriding the user agent string gives the steps:

1. With DevTools open, click the three-dot More options menu at the top right of DevTools, then More tools, then Network conditions. Or press Cmd+Shift+P, type Network conditions and press Enter.
2. In the User agent section, clear the Use browser default checkbox.
3. Pick a phone from the list, or paste a custom string.
4. Reload the page.

The same page makes an important point: overriding the user agent changes what content Chrome is served, not how Chrome works internally. A site that checks for real phone features beyond the user agent can still tell. The panel also lets you edit the user agent client hints for the selected string, which some sites read instead of the classic header.

Three more things explain most of the remaining failures:

• A cookie remembers your choice. Sites that offer a "view desktop site" link often store the answer. Clear that site's cookies or open the page in a guest window.
• The page was cached. Press Cmd+Shift+R for a hard reload, which bypasses the cache without emptying it.
• Signing in pins a layout. Some services remember the layout per account. Logging out and loading the page fresh in Device Mode shows what a new phone visitor gets.

What Device Mode cannot show you

Google is direct about the limits. The documentation calls Device Mode a first-order approximation, notes that your code is not actually running on a mobile device, and points out that a phone's processor architecture is very different from a Mac's. The throttle presets help a little. Mid-tier mobile simulates fast 3G and slows the CPU four times, and Low-end mobile simulates slow 3G and slows it six times, but those factors are relative to your Mac, not to any particular phone.

Things a narrow window on a Mac will not reproduce:

• The browser's own address bar and toolbar appearing and disappearing as you scroll, which changes the visible height.
• The on-screen keyboard covering half the page when a form field is focused.
• Real touch precision, where a 30 pixel button is easy for a mouse and hard for a thumb.
• Behavior specific to Safari on iPhone, since browsers on iPhone generally run on Apple's WebKit engine rather than the engine in desktop Chrome.

When accuracy matters, use a real phone. For Android, Chrome supports remote debugging: turn on USB debugging in the phone's Developer Options, open chrome://inspect#devices on the Mac with Discover USB devices enabled, and connect a cable. The first connection shows the device as Offline until you accept the prompt on the phone. After that you can inspect the live page on the phone and screencast it to the Mac.

The same job in Safari on a Mac

If the goal is to see what an iPhone user sees, Safari is the closer match on a Mac, because it shares the iPhone's engine. Apple's tool is called Responsive Design Mode and it is off until developer features are enabled.

Per Apple's guide to enabling features for web developers: choose Safari in the menu bar, then Settings, open the Advanced pane, and check Show features for web developers. A Develop menu appears.

Then, from the Responsive Design Mode documentation: with the page focused, choose Enter Responsive Design Mode from the Develop menu, or press Control+Command+R. Pick a viewport preset, rotate it, or drag the side handles to any size. Apple notes the same caveat as Google: presets are approximations, and the address bar, the on-screen keyboard and form field behavior on a real device can change the layout. For a closer match it offers an Open with Simulator option, which needs Xcode and its simulators installed.

	Chrome Device Mode	Safari Responsive Design Mode
Turn it on	Cmd+Option+I, then Cmd+Shift+M	Enable developer features once, then Control+Command+R
Engine	Chrome's desktop engine	WebKit, the engine behind iPhone browsers
Change the user agent	Network conditions panel	Develop menu
Closer to a real device	Remote debugging over USB for Android	Open with Simulator, with Xcode

Saving the mobile view to show someone else

A common reason to switch a Mac to mobile view is to send a colleague or a client proof of how a page looks on a phone. Device Mode has this built in, so there is no need to crop a screenshot by hand.

According to the Device Mode documentation, the options sit behind the More options menu of the device toolbar:

1. Choose a named phone in the Dimensions list so the width matches a real device.
2. Open More options and choose Capture screenshot. This saves exactly what is visible in the viewport.
3. To save the whole page, including everything below the fold, choose Capture a full size screenshot from the same menu.
4. To include the outline of the phone around the image, first choose More options, then Show device frame, and then capture. Not every preset has a frame; when one is missing, DevTools simply has no artwork for that device.

If the phone you need is not in the list, add it. Open the Dimensions list, choose Edit, and on the Devices tab either tick a device from the supported list or click Add custom device. A name, width and height are required. The device pixel ratio, user agent string and device type are optional, and the device type defaults to Mobile. The new entry then appears in the Dimensions list for every site.

Two settings make the image more honest. Turn on Show media queries under More options to see the breakpoints the page uses, and add a device pixel ratio of 2 or 3 so that images load at the resolution a modern phone would request.

Keeping a mobile view open all day

Device Mode is built for checking a page, not for living in one. It belongs to a single tab, it disappears when DevTools closes, and DevTools takes a large share of the window while it is open. Some people want the phone layout for a different reason: a chat app, a social feed or a dashboard is simply easier to use in a narrow column next to their main work.

For that, the width trick is usually enough on its own, since most of those services are responsive. A narrow window placed at the edge of the screen gets the compact layout without any developer tools. The catch is window management: the narrow window gets buried behind others, and if it is a second account on the same service it has to live in a separate profile or container.

Apps that keep one web service parked at the side of the screen solve this more directly. Some app aggregation browsers on macOS include a side panel that holds one app in a narrow strip on the right edge while you keep working in the main pane. The page sees a narrow viewport and, if it is responsive, serves its compact layout, with no user agent tricks and no DevTools in the way. The features page describes how that panel works, and the supported apps list shows which services can be added by name.

What to set up first

For a one-off check, use Cmd+Option+I and then Cmd+Shift+M in Chrome, choose a named phone and reload. If you need the iPhone view specifically, turn on Safari's developer features once and use Control+Command+R. If you want a compact view of a web app open all day, try a side panel in an app aggregation browser such as SpaceDeck, which keeps that app in a narrow strip beside your work.