mobile view switcher safari

3 Best Ways to Open Sites in Mobile Mode in Safari for iPadOS

Dilum Senevirathne is a freelance tech writer specializing in topics related to iOS, iPadOS, macOS, Microsoft Windows, and Google web apps. Besides Guiding Tech, you can read his work at iPhone Hacks, Online Tech Tips, Help Desk Geek, MakeUseOf, and Switching to Mac.

Safari is a vastly improved web browser on iPads running iPadOS. You can customize websites, use content blockers, manage multiple file downloads , perform tons of keyboard shortcuts, and a whole lot more . It also loads websites in desktop mode, which makes web browsing more convenient.

By default, Safari for iPadOS masquerades itself as a desktop browser (with a Safari for Mac user agent string to boot). And with the desktop-oriented nature of iPadOS , that makes total sense.

However, the iPad still primarily resorts to touch-based input, and there are multiple instances where certain desktop sites will not work with your favorite gestures.

So you may want to switch certain sites to mobile mode whenever their desktop versions don’t respond all that well. But how do you do that?

Thankfully, Safari for iPadOS offers multiple ways to launch sites in mobile mode. Let’s check the three best methods that work flawlessly.

1. Load Single Site in Mobile Mode – Temporarily

You can easily instruct Safari to switch a tab to mobile view whenever you face issues with the site’s desktop view. Start by tapping the ᴀA icon to the left corner of the Safari address bar.

On the menu that shows up, tap Show Mobile Website. As soon as you do that, Safari will reload the tab automatically and show you the mobile version of the website.

The site within the tab will continue to show up in mobile mode, even if you navigate to a different page on the same site.

Note: The change only applies to the active tab that you are currently viewing and not to the entire browser. You must repeat this action for other tabs if you want to switch the other sites to mobile view.

If you want to roll back to the desktop mode, bring up the ᴀA icon-based menu again, and then tap the Show Desktop Site option. Safari will revert the tab to desktop mode automatically in case you stray away to another website.

2. Load Single Site in Mobile Mode – Permanently

If you want to load a specific website in mobile mode permanently, regardless of whichever tab it is that you are on, then you must make a slight configuration to the content settings of the site. Bring up the ᴀA menu, and then tap Website Settings.

On the Website Settings sheet that shows up, turn off the switch next to Request Desktop Site and tap Done to apply your changes.

Safari will automatically refresh the website and relaunch it in mobile mode. And it will continue to do so, even when you launch the site (and all related web pages) in other tabs. That will continue even if you quit the Safari app and reopen it.

If you want to go back to using the desktop version of the website, make sure to open the site in the tab you are currently on, bring up the Website Settings sheet from the ᴀA icon-based menu, and then turn on the switch next to Request Desktop Site.

Alternatively, you can request the desktop version temporarily by tapping the Show Desktop Site option on the ᴀA menu.

3. Load All Sites in Mobile Mode

Getting sick and tired of sites loading in desktop mode? You can actually configure Safari to load all websites in mobile mode by default. That is ideal if you don’t have a keyboard or mouse set up on your iPad , and instead want a great touch-based experience with Safari.

Start by opening the Settings app on your iPad. Go down the left-hand side, select Safari, and then flick through the list of Safari settings until you get to the Settings for Websites section. Tap the Request Desktop Website option underneath it.

On the Request Desktop Website screen that shows up, turn off the switch next to All Websites. That should prompt Safari to load all sites in mobile mode.

Note: Safari will continue to open sites in mobile mode until you go back to the Request Desktop Website setting within Settings > Safari and turn on the switch next to All Websites.

If there are sites that you’ve manually configured to show up in mobile mode using the previous method, then the Request Desktop Website screen will show up slightly differently.

In this case, you will see a list of all excluded sites, and the All Websites option will show up as Other Websites — turn off the switch next to it to make Safari load all sites in mobile mode.

Mobile Mode to the Rescue

Apple did the right thing by configuring Safari on iPadOS to launch sites in desktop mode by default. However, using a keyboard and a mouse to interact with some of the more complicated sites will certainly make a difference. So the next time a website gives you grief, know that mobile mode is a few taps away.

Next up: Did you know that you can use multiple Safari windows in iPadOS? Here’s everything you need to know about using them.

Was this helpful?

Last updated on 28 November, 2022

The above article may contain affiliate links which help support Guiding Tech. However, it does not affect our editorial integrity. The content remains unbiased and authentic.

Leave a Reply Cancel reply

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

The article above may contain affiliate links which help support Guiding Tech. The content remains unbiased and authentic and will never affect our editorial integrity.

DID YOU KNOW

Dilum Senevirathne

More in ios.

5 Ways to Fix Safari Not Playing Videos on iPhone

What Does FaceTime Photos Must be Enabled on Both Devices Mean

Join the newsletter.

Get Guiding Tech articles delivered to your inbox.

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

How can I quickly open a mobile view of a page in a desktop browser?

Since we're now in a mobile-first world, it becomes more and more important to be able to test websites easily on mobile phones, or on emulated mobile phones. I collaborate with people who work on websites and social media offerings, and I would like to encourage them to regularly open websites from their desktop browsers in a mobile view. I'm specifically thinking of the browser's built-in "mobile view" feature, which is often hidden among all the other developer tools a browser provides, but I'm happy to consider anything which is just as quick to set up.

How can you open a mobile view of a website from a desktop browser?

• 24 "Since we're now in a mobile-first world" Woah there a minute... context is for kings. –  Lightness Races in Orbit Commented Feb 6, 2018 at 12:49
• 3 Just a comment - don't know the context really, but if I was asked to be opening webpages from my desktop/laptop in mobile view first ....what's the point of using the desktop? I hope by "encourage", you're not forcing it via some code or other method. Especially since many webpages that do format for mobile are pared down quite a bit and don't have full functionality. –  BruceWayne Commented Feb 6, 2018 at 16:27
• 1 Add a change user agent or similar extension or plug in to your browser, and set a smart phone user agent. –  Salman Arshad Commented Feb 6, 2018 at 17:10
• 1 “I would like to encourage people to regularly open websites from their desktop browsers in a mobile view.” ...That's goofy. And waste all that desktop screen real estate? Desktop and mobile both have their place, and that's why responsive solutions have been developed. Let's deliver the best experience possible for every user, and let people browse on the device that's most comfortable for them. Anyway, valid question, as web designers and developers need to emulate multiple devices when building sites. –  Mentalist Commented Feb 7, 2018 at 2:52
• 3 @Mentalist I meant people who are working on websites and social media offerings. –  Flimm Commented Feb 7, 2018 at 7:28

7 Answers 7

• In Windows/Linux, press Ctrl + Shift + M
• In macOS, press option + command + M

You can also find the menu item under ("Tools"), "Web Developer", "Responsive Design Mode".

Chrome and Edge:

You need to have "Developer Tools" open first:

• In Windows/Linux, press Ctrl + Shift + I or just F12
• In macOS, press option + command + I

Once developer tools is open and focused, you can toggle device emulation:

• In macOS, press command + shift + M

There is a small button in the developer tools toolbar that enables device emulation, if you prefer to click a button rather than press a keyboard shortcut.

It looks like Apple have disabled by default the keyboard shortcut for entering responsive design mode. You can follow this tutorial on configuring a keyboard shortcut for it .

You can find the menu item by clicking "Develop", "Enter Responsive Design Mode". If you can't see the "Develop" menu item, you need to enable it by opening "Preferences", "Advanced", and ticking "Show Develop menu in menu bar".

• 2 Note that ctrl shift M works only if developer tools are already open –  Naramsim Commented Feb 6, 2018 at 10:29
• 3 @Naramsim Thanks. That only applies to Chrome. I've edited my answer. –  Flimm Commented Feb 6, 2018 at 11:19
• 3 For Windows/Chrome, F12 is a potentially easier way to get to Dev Tools... although if the next keystroke is going to be Ctrl-Shift-M, I suppose starting with Ctrl-Shift-I may be more logical. –  sǝɯɐſ Commented Feb 6, 2018 at 13:21
• I believe on previous versions of Safari Cmd+Shift+R would open responsive design mode. Seems to not exist on latest version unless you manually bind it –  Downgoat Commented Feb 6, 2018 at 23:52
• 1 Chrome remembers if you wanted a mobile preview, so once you've enabled it, you can toggle between mobile/desktop simply using F12 –  Pieter De Bie Commented Feb 8, 2018 at 12:26

Flimm’s answer is 100% correct. Just in case remembering the shortcuts is too much of a hassle, it’s this blue button in the Developer Tools to toggle between the web view and mobile/tablet view:

Or with Firefox:

After enabling the device toolbar, you can then choose the make and model of the device you wish to emulate from the dropdown menu.

• 1 What piece of software does the first part refer to? –  Kamil Maciorowski Commented Feb 7, 2018 at 5:22
• @KamilMaciorowski DevTools is the developer tool found in Chrome and Opera. –  OptimusCrime Commented Feb 7, 2018 at 7:46
• @KamilMaciorowski This is not a software, this is available on any of your web browser. Specifically if you're using chrome, right click on any window and click on inspect and you will see this window in your browser docked below or to the right of the browser. These are more commonly known as Dev Tools. –  Shobhit Garg Commented Feb 7, 2018 at 16:13
• @Shobbit Garg Is that the windows, which opens when I press CTRL + Shift + C? –  daniel.heydebreck Commented Feb 8, 2018 at 8:22
• @daniel.neumann Unfortunately I use mac, so I cannot test and see what happens when you press those keys. But referring to the shortcuts listed above, this window should open by pressing "ctrl + shift + I" on chrome, "ctrl + shift + M" on firefox or pressing f12 on IE/Edge. –  Shobhit Garg Commented Feb 8, 2018 at 15:04

For the purpose of testing, i use the following websites :-

• http://www.jamus.co.uk/demos/rwd-demonstrations/
• http://mattkersley.com/responsive/

Both of the above sites allow me to view my web application in multiple device widths.

• "The connection to mattkersley.com is not secure" The other link won't open a site by giving its domain name. –  David Spector Commented Jul 5 at 10:38

You can set the user agent and window size from the command line or launch config of a shortcut.

For example:

& "C:\Program Files\Google\Chrome\Application\chrome.exe" --new-window --window-size=375,812 --user-agent="Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Mobile Safari/537.36" --user-data-dir=C:\workspace\tmp\chrome https://google.com

The --user-data flag is mandatory to make this work . Create a folder for it.

• "Create a folder for it" means what? –  David Spector Commented Jul 5 at 10:37

Add a "user agent switcher" extension in your browser and specify a mobile user agent. If the website is smart enough it will serve you mobile optimized version.

I will not recommend any specific extension. The ideal one should have presets for mobile browsers built-in and the ability to enable or disable user agent switching on per-website basis.

• 1 This is incorrect. Mobile layouts should work based on device / screen dimensions via CSS media queries, not user agent strings - it's not 2006 any more. –  PiX06 Commented Feb 7, 2018 at 13:51
• Most browsers' tool that allows a mobile view also lets you set a user-agent at the same time. –  Flimm Commented Feb 7, 2018 at 14:33
• 1 @PiX06 then no effort is necessary. Just resize the browser window! –  Salman Arshad Commented Feb 7, 2018 at 15:04
• 1 Unfortunately, I find myself with many questions: If I'm resizing the browser window anyway, why do I need to bother with user agents? To which dimensions should I resize the window? How do I measure the window? –  Mathieu K. Commented Feb 9, 2018 at 5:26

Online tool, limited to 5 requests every 5 minutes, lists popular cell phone models. https://www.responsivedesignchecker.com

Online tool, seems to work well, lists popular cell phone models. https://screenfly.org

https://blisk.io/ - The Blisk browser is solid, but "freemium".

Update: Now available on Windows, Mac and Linux!

This Chromium-based "browser built for development" provides a multitude of ways to demo the page in various devices with a vertical "pane" on the LEFT side, much like you see Chrome Developer Tools default to the right vertical column.

It's work a look. Though there are some limits to its "freemium extended functionality", it still works very well to "preview" both the PC and Mobile versions of your pages / sites in a side-by-side comparison. The paid features seem pretty rad too if you work in remote teams (though I personally think it need a better "test drive" program before hooking people on the monthly cost).

Full disclosure: there is an EXTREMELY annoying "time limit" per day on the mobile preview part (toggles open/closed from the icon to the right of the address bar - change the "device preview" from the tiny link-to-the-menu in the top right corner "Show device list").

BliskDemoScreenshot

All that said, I prefer how easy it is to add custom user-agent strings to the list of options for chrome extensions for as many customizations as you could ever need. I've found a few Browser Extensions from Chrome/Firefox that go a bit further by letting you toggle between browser user-agent strings of various Operating Systems AND the browsers. (e.g. https://chromewebstore.google.com/detail/user-agent-switcher/lkmofgnohbedopheiphabfhfjgkhfcgf -- runs offline also, which can be handy in certain cases)

• not available for Linux :-( –  david.perez Commented Mar 3, 2020 at 14:52
• Looks expensive. Lots of marketing. –  David Spector Commented Jul 5 at 10:42

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged browser ..

• The Overflow Blog
• From PHP to JavaScript to Kubernetes: how one backend engineer evolved over time
• Where does Postgres fit in a world of GenAI and vector databases?
• Featured on Meta
• We've made changes to our Terms of Service & Privacy Policy - July 2024
• Bringing clarity to status tag usage on meta sites

Hot Network Questions

• Completely introduce your friends
• Is it possible for a fuse to blow at extremely low temperatures?
• Ship sinking prevention device using foam?
• How do I safely remove a mystery cast iron pipe in my basement?
• What does "garb" mean in this passage?
• Is 2'6" within the size constraints of small, and what would the weight of a fairy that size be?
• Post apocalyptic horror/thriller movie set in a building with puzzle rooms and killer dogs
• When was this photo taken?
• Why does my PC take a long time to start, then when it's at the login screen it jumps to the desktop instantly?
• How Can this Limit be really Evaluated?
• Why do National Geographic and Discovery Channel broadcast fake or pseudoscientific programs?
• Why doesn't the world fill with time travelers?
• ST_Curvetoline creates invalid geometries
• Sci-fi short story about a dystopian future where all natural resources had been used up and people were struggling to survive
• How can these humans cross the ocean(s) at the first possible chance?
• In the tunneling effect, to find a particle inside the barrier must I necessarily supply energy to the particle?
• How can you trust a forensic scientist to have maintained the chain of custody?
• Power latching circuit MOSFET is stuck ON
• Purpose of burn permit?
• Routing radiused edges between nodes in TikZ
• High CPU usage by process with obfuscated name on Linux server – Potential attack?
• How can I see contents of maintainer scripts of apt packages?
• Which cards use −5 V and −12 V in IBM PC compatible systems?
• Is there any video of an air-to-air missile shooting down an aircraft?

How to Open Safari Developer Tools & Enable Mobile View Mode

John on May 12, 2021

In this tutorial, we will learn how to open the Safari developer console and enable mobile view for responsive web development.

How to Enable Safari Developer Tools

If you don't have developer tools enabled in Safari, you will need to do this before the console can be opened by using the following steps:

• From the main menu go to Safari > Preferences (or use the CMD + , keyboard shortcut.)
• Go to the Advanced tab.
• Check "Show Developer menu in menu bar"

Open the Safari Developer Console

Now open the developer console in responsive mode by going to the menu and selecting Develop > Enter Responsive Design Mode :

Alternatively, use the keyboard shortcut CTRL + CMD + R to enter responsive developer mode.

Now you can work on your website in a variety of different mobile device screen sizes by selecting them at the top of the page:

Related Tutorials

How to Stop DDOS Attacks & Prevent Future Downtime

How to Enable Night Light Mode on Windows 10

How to View Desktop Site on iPhone with Safari

How to Use Grep Command to Search Files in Linux

How to Find Words on a Page using Safari on iPhone

How to Clear & Save Disk Storage Space on a Mac

• My extensions & themes
• Developer Dashboard
• Give feedback

Mobile simulator - responsive testing tool

2.5K ratings

Smartphone and tablet simulator on computer with several models to test mobile responsive websites.

Very realistic desktop smartphone and tablet simulator with multiple devices and resolutions to test your mobile site. 55 devices are available for responsive testing 📱19 recent and old Android & Google smartphone models including the Galaxy S22 📱23 recent and old Apple smartphone models including iPhone 15 (PRO & MAX) 💻 5 tablet models ⌚️ And 8 special devices such as the Apple Watch, a Self-Service Terminal or a Macbook Some devices are only available in the premium version Main characteristics 🎬 Very easily create video captures in WEBM, GIF or MP4 format. 📸 It is also possible to take a screenshot of the smartphone in transparent PNG to insert it in an email, presentation slides, etc. 🌚 Night mode available (see screenshots) 🏷 Non-intrusive advertising is displayed in the free version This ad may be hidden in the premium version

4.9 out of 5 2.5K ratings Google doesn't verify reviews. Learn more about results and reviews.

omopis san Aug 27, 2024

Really useful for website design. Would recommend.

Atif Noor Aug 23, 2024

got blocked on a site

This developer declares that your data is

• Not being sold to third parties, outside of the approved use cases
• Not being used or transferred for purposes that are unrelated to the item's core functionality
• Not being used or transferred to determine creditworthiness or for lending purposes

Mobile browser emulator mainly for testing the responsiveness of web pages on various mobile screen sizes

Extract CSS and build beautiful styleguides.

Mobile View: Test responsive designs fast

Test your responsive designs on multiple devices at once.

Measure page elements size in pixel with an easy-to-use ruler.

Responsive Viewer

Show multiple screens once, Responsive design tester

Mobile Browser Simulator UserAgent Switcher

Listens for changes to a DOM node attribute in a page and sets the browser's useragent according to the contents of that attribute.

Mobile View Switcher

Switch to mobile view with one click via toolbar button.

Responsive design tester

Test your websites responsivness

Viewport Resizer: Ultimate Device Emulator & Website Testing Tool

Emulate devices, resize screens, and perfect your web design effortlessly with this cutting-edge testing and presentation tool.

Responsive Tester

Test responsive web designs or mobile pages and see if it is mobile friendly

Designer Tools

Measure and align elements within Chrome

Wappalyzer - Technology profiler

Identify web technologies

How to View Mobile Websites in Desktop Safari on macOS [Tutorial]

In today's guide we will show you how you can open mobile websites on your Mac in Safari running macOS. Let's dive right into it!

Want to View Mobile Websites in Desktop Safari Just Like How You Would See it on iOS or Any Other Mobile Device? - Here's How

Open up Safari on your Mac, type in a URL, hit Return and you'll see a desktop version of the website, as you should. But what if you want to see the mobile version of the website? Sure, you can do so by resizing Safari by dragging inwards from the corners, which is a trick that works on a very few websites by the way, but I'm talking about the real-deal mobile website as you'd see on your iPhone or an Android device. Well, it's pretty easy. Follow the steps below and you'll know it too.

Related Story How to Fix The Ongoing Wi-Fi Connectivity Issues in iOS 17

1. Open up Safari on your Mac.

2. Now click on 'Safari' in the menu bar.

3. Now click on Preferences , then Advanced .

4. At the very bottom you'll see an option called 'See Develop menu in menu bar.'

5. You'll see a brand new entry in the menu bar called Develop . Click on it to open.

6. Now select User Agent then select 'Safari - iPhone.'

7. Now open up any website in Safari and the mobile version will open up.

If you wish to revert the changes, just open up the Develop menu, hover your mouse over User Agent then select Default at the top. That's it.

Now, at this point you must be wondering: why do I wanna open mobile websites in desktop Safari? Well, first of all, you know how to do it. Secondly, if you are a developer, you can test your website without having to open it up on an iPhone immediately. Last but not the least, it's fun! So why not share your newfound knowledge with the people around you, eh?

Further Reading

How To Find Out Wi-Fi Router IP Address Using iPhone, iPad Or Mac

Reset macOS Dock to Original Apps Arrangement and Settings [Tutorial]

Use Siri On AirPods Pro Without Saying Hey Siri [Tutorial]

Force Your Mac To Use IPv6 Only [Tutorial]

Trending stories, tesla appears to be backing out of its promise to equip all hw3 cars with robotaxi-grade fsd, but the refund liability might not be as ginormous as initially feared, intel lunar lake “core ultra 200v” laptops from asus & acer listed online, prices range from €830 to €1170, nancy pelosi clocks in stock gains of around $15 million over the past ten days, pixel 9, pixel 9 pro xl recorded the lowest temperatures against iphone 15 pro max & others in a new battery drain test, but runtime was below average, pixel 9 owners cannot install geekbench, pcmark or 3dmark benchmarking apps from the play store, indicating the flagship lineup’s poor performance.

Popular Discussions

Intel arrow lake-s “core ultra 200” desktop cpus to debut on 10th october, amd ryzen 5 7600x3d reportedly launches in early september, 6 core “zen 4” with 3d v-cache, intel cpu market share drops down drastically in korean diy market, amd’s ryzen cpus fill in the gap, amd ryzen 9000x3d 3d v-cache cpus reportedly delayed to ces 2025, amd’s ryzen 9 9900x cpu drops below msrp in europe, down 8% less than a week after launch.

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Chrome DevTools
• More panels

Simulate mobile devices with device mode

Use device mode to approximate how your page looks and performs on a mobile device.

Device mode is the name for a collection of features in Chrome DevTools that help you simulate mobile devices. These features include:

• Simulating a mobile viewport
• Throttling the CPU
• Simulating geolocation
• Setting orientation

Limitations

Think of device mode as a first-order approximation of how your page looks and feels on a mobile device. With device mode you don't actually run your code on a mobile device. You simulate the mobile user experience from your laptop or desktop.

There are some aspects of mobile devices that DevTools will never be able to simulate. For example, the architecture of mobile CPUs is very different than the architecture of laptop or desktop CPUs. When in doubt, your best bet is to actually run your page on a mobile device. Use Remote Debugging to view, change, debug, and profile a page's code from your laptop or desktop while it actually runs on a mobile device.

Open the device toolbar

To open the device toolbar, follow these steps:

• Open DevTools .
• Click devices Toggle device toolbar located in the action bar at the top.

Simulate a mobile viewport

By default, the device toolbar opens in viewport with Dimensions set to Responsive . Using the Dimensions drop-down, you can simulate the dimensions of a specific mobile device .

Responsive Viewport Mode

Drag the handles to resize the viewport to whatever dimensions you need. Or, enter specific values in the width and height boxes. In this example, the width is set to 480 and the height is set to 415 .

Alternatively, use the width presets bar to set the width with a click to one of the following:

Show media queries

DevTools now displays two additional bars above the viewport:

• The blue bar with max-width breakpoints.
• The orange bar with min-width breakpoints.

Click between breakpoints to change the viewport's width so that the breakpoint gets triggered.

To find the corresponding @media declaration, right-click between breakpoints and select Reveal in source code . DevTools opens the Sources panel at the corresponding line in the Editor .

Set device pixel ratio

Device pixel ratio (DPR) is the ratio between physical pixels on the hardware screen and logical (CSS) pixels. In other words, DPR tells Chrome how many screen pixels to use to draw a CSS pixel. Chrome uses the DPR value when drawing on HiDPI (High Dots Per Inch) displays.

To set a DPR value:

In the action bar at the top of the viewport, select a DPR value from the new DPR drop-down menu.

Set the device type

Use the Device Type list to simulate a mobile device or desktop device.

The next table describes the differences between the options. Rendering method refers to whether Chrome renders the page as a mobile or desktop viewport. Cursor icon refers to what type of cursor you see when you hover over the page. Events fired refers to whether the page fires touch or click events when you interact with the page.

Device-specific mode

To simulate the dimensions of a specific mobile device, select the device from the Dimensions list.

For more information, see Add a custom mobile device .

Rotate the viewport to landscape orientation

Click screen_rotation Rotate to rotate the viewport to landscape orientation.

See also Set orientation .

Toggle dual-screen mode

Some devices, for example, Surface Duo, have two screens and two ways to use them: with one or both screens active.

To toggle between dual and single screen, click the devices_fold Toggle dual-screen mode in the toolbar.

Set device posture

Some devices, for example, Asus Zenbook Fold, have foldable screens. Such screens have a posture: continuous or folded. The continuous posture refers to a "flat" position and folded forms an angle between sections of the display.

To set the device posture, select Continuous or Folded from the corresponding drop-down menu in the toolbar.

Show device frame

In this example, DevTools shows the frame for the Nest Hub.

Add a custom mobile device

To add a custom device:

Click the Device list and then select Edit .

On the Settings settings > Devices tab, either choose a device from the list of supported ones or click Add custom device to add your own.

If you're adding your own, enter a name, width, and height for the device, then click Add .

The device pixel ratio , user agent string , and device type fields are optional. The device type field is the list that is set to Mobile by default.

Back in the viewport, select the newly added device from the Dimensions list.

Show rulers

DevTools shows rulers at the top and to the left of the viewport.

Click the rulers at specific marks to set the viewport's width and height.

Zoom the viewport

Use the Zoom list to zoom in or out.

Capture a screenshot

To capture a screenshot of the whole page including the content that isn't visible in the viewport, select Capture a full size screenshot from the same menu.

Throttle the network and CPU

To throttle both the network and CPU, select Mid-tier mobile or Low-end mobile from the Throttle list.

Mid-tier mobile simulates fast 3G and throttles your CPU so that it is 4 times slower than normal. Low-end mobile simulates slow 3G and throttles your CPU 6 times slower than normal. Keep in mind that the throttling is relative to the normal capability of your laptop or desktop.

Note that the Throttle list will be hidden if your Device toolbar is narrow.

Throttle the CPU only

Throttle the network only

To throttle the network only and not the CPU, go the Network panel and select Fast 3G or Slow 3G from the Throttle list.

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu, type 3G , and select Enable fast 3G throttling or Enable slow 3G throttling .

Emulate sensors

Use the Sensors panel to override geolocation, simulate device orientation, force touch, and emulate idle state.

The next sections provide a quick look on how to override geolocation and set device orientation. For a complete list of features, see Emulate device sensors .

Override geolocation

Or press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu, type Sensors , and then select Show Sensors .

Select one of the presets from the Location list, or select Other... to enter your own coordinates, or select Location unavailable to test out how your page behaves when geolocation is in an error state.

Set orientation

Select one of the presets from the Orientation list or select Custom orientation to set your own alpha, beta, and gamma values.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-02-20 UTC.

How To View Mobile Version Of Website On Desktop In Chrome

• Software & Applications
• Browsers & Extensions

Introduction

When browsing the web on a desktop, have you ever come across a website that looks fantastic on a mobile device but seems clunky and awkward on your larger screen? It's a common occurrence, especially as more and more websites are optimized for mobile viewing. Fortunately, there are ways to address this issue and experience the mobile version of a website right on your desktop. This can be incredibly useful for web developers, designers, and anyone who wants to see how a website appears on various devices without actually using those devices.

In this article, we'll explore two methods for viewing the mobile version of a website on your desktop using the popular Chrome browser . The first method involves utilizing Chrome's built-in Developer Tools, which provide a powerful set of features for web development and testing. The second method entails using a Chrome extension specifically designed to emulate mobile devices, allowing you to seamlessly switch between desktop and mobile views with just a few clicks.

By the end of this article, you'll have a clear understanding of how to leverage these tools to gain valuable insights into how websites appear and function across different platforms. Whether you're a web professional seeking to optimize user experiences or simply curious about how your favorite websites look on mobile devices, these methods will empower you to explore the mobile side of the web from the comfort of your desktop. Let's dive in and discover how to unlock the mobile potential of websites right within your Chrome browser.

Method 1: Using Chrome Developer Tools

Chrome Developer Tools is a robust set of features built into the Chrome browser, designed to aid web developers in debugging, optimizing, and experimenting with web pages. One of its powerful capabilities is the ability to simulate a mobile environment, allowing users to view how a website appears and functions on various mobile devices without leaving their desktop.

To access Chrome Developer Tools, simply right-click on any element of a web page and select "Inspect" from the context menu. Alternatively, you can press Ctrl + Shift + I on Windows or Cmd + Option + I on Mac to open the Developer Tools panel. Once the panel is open, click on the "Toggle Device Toolbar" icon (or press Ctrl + Shift + M on Windows or Cmd + Option + M on Mac) to activate the device simulation mode.

Upon enabling the device simulation mode, the web page will transform to emulate the dimensions and characteristics of a mobile device. You can choose from a wide range of pre-configured device profiles, including popular smartphones and tablets, or customize the dimensions to match a specific device. This allows you to experience the website as if you were viewing it on an actual mobile device, complete with touch interactions and responsive design adjustments.

Furthermore, Chrome Developer Tools provides additional functionalities such as network throttling, allowing you to simulate different network conditions to observe how the website performs under varying levels of connectivity. This feature is invaluable for assessing the loading times and responsiveness of a website on mobile devices with slower connections.

In addition to device simulation and network throttling, Chrome Developer Tools offers comprehensive inspection tools for analyzing and modifying the structure, layout, and behavior of web pages. This includes examining the HTML, CSS, and JavaScript components, as well as monitoring network activity and performance metrics.

By leveraging Chrome Developer Tools, users can gain deep insights into how websites adapt to mobile environments, identify potential issues, and optimize the user experience across different devices. Whether you're a web developer fine-tuning responsive designs or a curious user interested in exploring the mobile versions of your favorite websites, Chrome Developer Tools provides a powerful and accessible platform for mobile web exploration right from your desktop.

Method 2: Using Chrome Extension

Another convenient method for viewing the mobile version of a website on your desktop is by utilizing a Chrome extension specifically designed for emulating mobile devices. This approach offers a seamless and user-friendly way to switch between desktop and mobile views with just a few clicks, making it an ideal option for those who prefer a straightforward solution without delving into developer tools.

One popular Chrome extension that excels in this functionality is "Mobile View Switcher." Upon installing this extension from the Chrome Web Store, a small mobile phone icon will appear in the browser's toolbar. Clicking on this icon presents a dropdown menu featuring a variety of mobile device options, including smartphones and tablets from different manufacturers and with various screen sizes.

By selecting a specific device from the dropdown menu, the extension instantly transforms the current tab to emulate the chosen mobile device's screen dimensions and characteristics. This allows users to experience the website as it would appear on the selected mobile device, complete with responsive design adjustments and touch interactions.

The "Mobile View Switcher" extension also provides the flexibility to customize and add new device profiles, catering to specific mobile devices not included in the default options. This customization feature ensures that users can accurately emulate the exact dimensions and behaviors of the mobile devices they are interested in, providing a comprehensive testing environment for mobile web experiences.

In addition to device emulation, the extension offers a user-friendly interface for quickly toggling between mobile and desktop views, enabling effortless comparison of how a website renders and functions across different platforms. This seamless switching capability is particularly valuable for web designers, developers, and quality assurance professionals seeking to assess and optimize the mobile compatibility of websites.

Furthermore, the "Mobile View Switcher" extension integrates smoothly with other Chrome developer tools and extensions, enhancing its compatibility and usability within the broader web development ecosystem. This seamless integration ensures that users can leverage the extension alongside other web development tools to gain comprehensive insights into mobile web experiences.

By leveraging a dedicated Chrome extension such as "Mobile View Switcher," users can effortlessly explore the mobile versions of websites right from their desktop, gaining valuable perspectives on how websites adapt to various mobile devices. Whether you're a web professional striving to enhance mobile user experiences or simply curious about how your favorite websites appear on different devices, this method provides an accessible and intuitive approach to mobile web exploration within the Chrome browser.

In conclusion, the ability to view the mobile version of a website on a desktop using Chrome Developer Tools and dedicated Chrome extensions offers a wealth of benefits for web professionals, designers, developers, and curious users alike. By harnessing these methods, individuals can gain valuable insights into how websites adapt to mobile environments, optimize user experiences, and ensure seamless functionality across diverse devices.

The utilization of Chrome Developer Tools provides a comprehensive platform for simulating mobile environments, enabling users to experience websites as they would appear on various mobile devices. This powerful feature not only facilitates visual inspection but also allows for in-depth analysis of the website's structure, layout, and performance. With the ability to customize device dimensions and simulate different network conditions, Chrome Developer Tools empowers users to identify and address potential issues related to mobile responsiveness and user interaction.

Furthermore, the convenience and accessibility of dedicated Chrome extensions, such as "Mobile View Switcher," offer a user-friendly approach to exploring the mobile versions of websites. With seamless device emulation and effortless switching between desktop and mobile views, these extensions cater to users who prefer a straightforward solution for assessing and optimizing mobile compatibility. The integration of customization options and compatibility with other web development tools further enhances the utility of these extensions, making them valuable assets for web professionals and enthusiasts.

Whether it's ensuring a seamless user experience across devices, fine-tuning responsive designs, or simply satisfying curiosity about how websites appear on mobile platforms, the ability to view the mobile version of a website on a desktop is a valuable capability. It empowers individuals to stay ahead in the ever-evolving landscape of web design and development, fostering a deeper understanding of mobile user experiences and driving the optimization of websites for diverse audiences.

In essence, the methods outlined in this article not only enable users to explore the mobile side of the web from the comfort of their desktop but also contribute to the ongoing enhancement of mobile web experiences. By leveraging the powerful capabilities of Chrome Developer Tools and dedicated Chrome extensions, individuals can navigate the complexities of mobile web optimization with confidence and creativity, ultimately delivering exceptional user experiences across all devices.

Leave a Reply Cancel reply

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

Save my name, email, and website in this browser for the next time I comment.

• Crowdfunding
• Cryptocurrency
• Digital Banking
• Digital Payments
• Investments
• Console Gaming
• Mobile Gaming
• VR/AR Gaming
• Gadget Usage
• Gaming Tips
• Online Safety
• Software Tutorials
• Tech Setup & Troubleshooting
• Buyer’s Guides
• Comparative Analysis
• Gadget Reviews
• Service Reviews
• Software Reviews
• Mobile Devices
• PCs & Laptops
• Smart Home Gadgets
• Content Creation Tools
• Digital Photography
• Video & Music Streaming
• Online Security
• Online Services
• Web Hosting
• WiFi & Ethernet
• Browsers & Extensions
• Communication Platforms
• Operating Systems
• Productivity Tools
• AI & Machine Learning
• Cybersecurity
• Emerging Tech
• IoT & Smart Devices
• Virtual & Augmented Reality
• Latest News
• AI Developments
• Fintech Updates
• Gaming News
• New Product Launches

OpenStack Backup and Recovery Software

• Apple Wallet Availability in the PocketGuard App Sync your Apple Card Apple Cash and Savings from Apple Card Accounts

Related Post

Ai writing: how it’s changing the way we create content, how to find the best midjourney alternative in 2024: a guide to ai anime generators, unleashing young geniuses: how lingokids makes learning a blast, 10 best ai math solvers for instant homework solutions, 10 best ai homework helper tools to get instant homework help, related posts.

How To View Mobile Version Of Website On Chrome

How To Request Desktop Site On Chrome

How To See Mobile View In Chrome

How To See My History On Chrome

How To Switch To Desktop Mode On Chrome

How To Get Around Paywalls In Chrome

How Do I Know Which Version Of Chrome I Am Using?

What Version Of Google Chrome Do I Have?

Recent stories.

Apple Wallet Availability in the PocketGuard App: Sync your Apple Card, Apple Cash, and Savings from Apple Card Accounts

5 Ways to Improve IT Automation

What is Building Information Modelling?

How to Use Email Blasts Marketing To Take Control of Your Market

Learn To Convert Scanned Documents Into Editable Text With OCR

Top Mini Split Air Conditioner For Summer

Comfortable and Luxurious Family Life | Zero Gravity Massage Chair

• Privacy Overview
• Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Mobile View Switcher

Description.

You can make a difference in the Apple Support Community!

When you  sign up with your Apple ID , you can provide valuable feedback to other community members by  upvoting helpful replies and User Tips .

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

how do i switch back to mobile view from request desktop site?

I was trying out new features on ios 8 and I saw an article about using the "request desktop site" mode on safari. So I tried it, works great. But how do I switch back to mobile view? I can't figure it out. The page is now stuck on the desktop site mode.

Posted on Sep 24, 2014 9:23 AM

Posted on Sep 24, 2014 11:11 AM

unless there is an option on the website itself to revert back to the mobile version, you are stuck in the desktop view until you reload it.

Loading page content

Page content loaded

Sep 24, 2014 11:11 AM in response to chamelean75

• Vote: Reader’s Choice
• Meta Quest 4
• Google Pixel 9
• Google Pixel 8a
• Apple Vision Pro 2
• Nintendo Switch 2
• Samsung Galaxy Ring
• Yellowstone Season 6
• Recall an Email in Outlook
• Stranger Things Season 5

The updated Safari app is Apple’s best-kept secret in iOS 18

Safari, for all its quirks, still commands the lion’s share of web browsers on Apple products. But compared to what its rivals offer on Android, it also comes out as the laziest in terms of innovation.

With iOS 18 , Apple is turning the AI knob to the max , and the ripple effects of that approach are reflected in the latest builds of iOS and iPadOS, as well. Much attention has also been paid to making the web browser more convenient.

But a couple of features really stand out, and they dramatically improve one of Safari’s fundamental utilities: providing information on a screen in a less frustrating fashion.

Finally, a worthy reader

When Apple announced Reader mode in Safari across all its platforms, I dismissed it as just another small update. But the execution has really stood out for me, especially the tasteful background colors and how clean everything looks right from the start.

As soon as you land on a compatible website, the URL bar flashes a “Reader Mode available” message. In case you miss it, the icon to the left end of the pill-shaped bar also changes its shape to that of a notebook held vertically.

Tapping on it opens a small window with two prominent buttons: Show Reader and Listen to Page. Both are pretty self-descriptive. Once you enable the Reader mode for a webpage, it just doesn’t pick a random background color. Instead, it plays to the tunes of your phone’s default light/dark mode settings. So, if you’ve got light mode enabled, the Reader mode picks up the theme with a black background.

In case you’re wondering, there are four colors to choose from: white, black, gray, and beige. The dark version looks the best, but for reading, the beige color scheme, with its vintage newspaper-esque feel, takes the cake. It’s funny that Reader mode doesn’t work on Apple’s website. Irony, eh? Jokes apart, you can adjust size and font without losing yourself in a maze of hidden settings.

Apple has created a clean scrolling list of fonts in the same pop-up window as the core reading controls, alongside page magnification adjustments. Another understated perk is that you can set the Reader mode to trigger automatically for any website of your choice.

For example, if you’re currently reading this article on Digital Trends, tap the three-dot ellipsis icon in the Reader mode window, and as it expands, enable the toggle that says “Use Reader Automatically.”

Of course, it’s AI season, so a smattering of Apple Intelligence is making its way to the Reader mode in Safari. It only makes sense, especially when it serves a purpose and is not merely there for some gimmick, unlike what we recently saw with Google’s Pixel Studio app .

You may also notice a pink icon right below the headline of a webpage, proclaiming the word “Summarize” in bold. Well, it does exactly what it says. Tap on it, and you will see a colorful wave passing over the text for a few seconds. Voila, you have a summary presented right at the top.

But what’s not-so-voila about this summary is that it’s not always accurate. Occasionally, it can simply miss the most important elements of the story, but otherwise, it does a fairly good job of diluting a long story into a concise version. It’s not surprising, as the Summarizer feature in the Mail app also makes similar mistakes. As the adage goes, it’s just another day for AI.

On the Android side, the situation is a bit complicated. Chrome on mobile lacks a native Reader mode. You have to download a dedicated app by Google from the Play Store, head back to Chrome, and then tap on the floating shortcut to enable Reader mode on any webpage of your choice. Apple has a better implementation here, and it shows.

Snap, and it shall be done

In 2019, Google added the Infinity Gauntlet to its search results . A click on this apocalyptic hand wiped half the search results — gone, reduced to atoms — with the same kind of animation as the Avengers vanishing into nothingness when the Mad Titan snapped his fingers.

Apple has added something similar to Safari with iOS 18. But instead of restoring balance to the universe in a murderous fashion, this one wipes off visual distractions from a webpage. Think of pesky ads, scrolling widgets, pop-up videos, and other unnecessary items.

It can wipe anything. The headline, images, embeds, pop-ups, unnecessary social icons … whatever you’d like. Heck, go ahead, wipe off the entire text, and stare into the nothingness of a bright OLED screen. All you need to do is tap the Reader mode icon in the URL bar and select “Hide distracting items.”

Next, scroll through the webpage, find any distracting element, and select it. It will gloriously vanish like sand flying in a desert storm. It’s beautiful to witness, even though it’s tedious, compared to the convenience of having a pristine view in Reader mode.

But I think it’s more of a fail-safe measure for web pages where Reader mode can’t be enabled, such as Apple’s own web page that describes the new iOS 18 feature. On a serious note, I don’t know how happy advertisers are about this feature, but it certainly impacts the click-driven rule for studying (read: rewarding) the impact of ads.

A few other niceties

There are some other new features that haven’t received much attention, but they are here nonetheless. Highlights are a neat addition to flash important information from a web page in a more noticeable fashion. Apple has also made the native browsing tools context-aware. You will see Reader mode controls and the voice reader facility only on web pages where they make sense. For example, they won’t appear on your bank’s website.

Say you land on a website with content in a non-native language. Instead of rummaging through the menu for the translate button, in iOS 18, you will see it in the quick pop-up with a single tap on the left edge of the URL bar. Apple has also pulled tools that used to be hidden behind a few layers and now prominently shows them as a scrolling list in the main Safari toolbar. These include core tab controls, page actions, and link behavior.

Furthermore, you can adjust their position to your liking based on how frequently you use them. Finally, the Apple browser now supports extensions and content blockers in web apps. Many other technical changes have also been made in the background, which you can read about on Apple’s website .

Overall, Safari in iOS 18 (and iPadOS 18) is not a revolution by any stretch of the imagination. But for the new features that are here, they’ve been executed nicely. And I’ll take that instead of an ambitious but buggy mess.

But more than anything, it’s a practically helpful set of features. This isn’t a flashy set of AI tricks that need a lot of pricey computational power. It all lives in an app that you visit regularly for meaningful tasks. And I love it.

Editors’ Recommendations

• Apple just announced its iPhone 16 event. Here’s when it’s happening
• The App Store is about to become optional on some iPhones
• Apple just released another iOS 18 beta, and it could be an important one
• The iPhone Air may be Apple’s most important new iPhone in years
• Apple’s AI features may cost as much as $20 per month
• Apple iPhone

“Apple does things practically.” Or, “Apple is late because it’s perfecting the tech.” “Would you prefer being the first or the best?” These are just some of the recurring arguments you will find in any heated Reddit thread or social media post hunting for some rage bait clout.

Yet, there’s some truth to it, as well. And a whole lot of hidden tech that sometimes takes a decade to come out. Apple Intelligence is the best example of one such leap, and it’s being seen as Apple’s answer to the generative AI rush.

Rumors about Apple iPhone models for 2025 are already starting to circulate, even though we’re still waiting for the iPhone 16 series to be officially announced this fall. While we’re still pretty far out for the anticipated release of the iPhone 17 models next year, that hasn’t stopped speculation that Apple may be set for a major change to its iPhone 17 lineup with the release of a much slimmer iPhone called the iPhone Air.

The source of this speculation — and that’s all it is so far — is Front Page Tech’s Jon Prosser, who posted a 12-minute YouTube video delving into Apple potentaially changing the lineup of the iPhone 17 models and introducing a new device with a new name.

I've been using iOS 18 on my iPhone 15 Pro Max since the first developer version was released in June at Apple's Worldwide Developers Conference (WWDC). The upcoming software update for iPhone, set to be released this fall, has plenty of exciting features. I have a clear favorite feature, and I'm starting to appreciate many more.

iOS 18 remains an unfinished product from the perspective of anyone outside of Apple, as we have yet to see its most anticipated new features debut. At least for now, here's what I like. Dark app icons for the win

How-To Geek

View mobile websites in windows with safari 4 developer tools.

Your changes have been saved

Email is sent

Email has already been sent

Please verify your email address.

You’ve reached your account maximum for followed topics.

Why Public Wi-Fi is a Hacker’s Playground (And How to Protect Yourself)

Youtube is losing the war against adblockers, why you need a longer password.

Want to try out mobile websites designed for the iPhone and other mobile devices on your PC?  Safari 4 for Windows lets you do this easily with their developer tools.

By default, Safari will show standard desktop websites.  But by making a simple change, you can switch it to work like Safari Mobile on the iPhone or iPod Touch.

Getting Started

First make sure you have Safari 4 for Windows installed.  You can download Safari directly (link below) and install it as usual.

Or if you already have another Apple program installed, such as QuickTime or iTunes, then you can install it from Apple Software update.  Simply enter apple software update in the Start menu search box.

And then select Safari 4 from the list of new software available.  Click Install to automatically download and install Safari.

Accept the license Agreement, and then Safari will automatically install.

Once this is finished, Safari will be ready to use.

View Mobile Sites in Safari

First, we need to enable the developer tools.  Click the gear icon on the toolbar, and select Preferences.

Click the Advanced tab, and then check the box that says “Show Develop menu in menu bar”.

Once you’ve closed your settings box, click the page icon, select Develop, then User Agent, and then choose one of the Mobile Safari settings.  In our test we chose Mobile Safari 3.1.2 – iPhone.

To make your browser emulate a mobile device better, you can hide the bookmarks and tab bar to have a more streamlined interface.

Click the Gear icon, and select “Hide Bookmarks Bar”, and then repeat and click “Hide Tab Bar”.

You can also shrink your window to be closer to the size of a mobile device screen.  Once you’ve done these things, Safari should look similar to this screenshot.  Here we have loaded Google.com, and you can see it in its iPhone-style interface.

Simply enter any website into the address bar, and it will load in its mobile interface if it has one.  Here is Google’s other mobile offerings, right inside Windows.

Gmail loads messages with the default iPhone interface.

One especially interesting mobile site is Apple’s online iPhone User Guide .  When loaded in Safari with the iPhone setting, it loads with a very nice mobile UI that works just like an iPhone app.  In fact, you can even click and drag to scroll, just like you would with your finger on an iPhone.

Even if you do not have a Smartphone, you can still preview what websites will look like on them with this trick. Not all sites will work of course, but it’s fun to play around with different sites that have mobile versions.

Safari 4 Download

Apple iPhone online user guide

• Web Browsers

Safari Pearl is your source on the Palouse for comics, games, costumes, and theatrical make-up. Our selection of comics and graphic novels offer captivating stories for every taste, age, and reading level. We also have a great selection of board games, card games, role-playing games, 40K, and Age of Sigmar. Games are a great entertainment value, they bring people together, and they build brain power. Feel free to try a game or join an event in our store game room. Safari Pearl is also your local, year-round source for costumes, cosplay, and stage make-up. We can supply everything you need for your theatrical production, we'll happily help you plan a theme party, and we love Halloween...

Shop Our Web Store - Browse Our Pokemon And Magic Singles

Calendar Of Events - Safari Pearl Customer Wish List

Send An eGift Card - Check Your Gift Card Balance

Safari Pearl 660 W Pullman Rd Moscow, ID 83843 Monday - Saturday 11:00 am - 7:00 pm Sunday Noon - 5:00 pm 208-882-9499 - [email protected] Map it!

Member • Jul 29, 2013

Moscow Metro To Deploy SIM Card Snooping Devices To Retrieve Stolen Mobile Phones

Satya Swaroop Dash

Jeffrey Arulraj

Member • Jul 30, 2013