safari device toolbar

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
• Looking under the hood at the tech stack that powers multimodal AI
• Featured on Meta
• Join Stack Overflow’s CEO and me for the first Stack IRL Community Event in...
• User activation: Learnings and opportunities

Hot Network Questions

• Would a material that could absorb 99.5% of light be able to protect someone from Night Vision?
• Smallest prime q such that concatenation (p+q)"q is a prime
• Some of them "have no hair"
• Emergency belt repair
• Wondering about ancient methods of estimating the relative planetary distances
• How am I supposed to solder this tiny component with pads UNDER it?
• "First et al.", many authors with same surname, and IEEE citations
• PCB design references and roadmap
• How much would you trust a pre-sales inspection from a "captured" mechanic?
• Why Doesn't the cooling system on a rocket engine burn the fuel?
• Using a Compass to Detect Islands in the Sky
• “…[it] became a ______ for me.” Why is "gift" the right answer?
• Why is Germany looking to import workers from Kenya, specifically?
• The graph of a continuous function is a topological manifold
• Removing undermount sink
• Is it possible to make sand from bones ? Would it have the same properties as regular sand?
• 3D Chip Design using TikZ
• My team is not responsive to group messages and other group initiatives. What should be the appropriate solution?
• Establishing Chirality For a 4D Person?
• If a mount provokes opportunity attacks, can its rider be targeted?
• Sync Layernotes between Projects
• How to avoid repeated input while using newcommand?
• bash scripting: Saving and then processing file contents as a bash variable
• Is this legal to help a friend in need

• Save Early: Amazon Prime Big Deal Days!
• Use This Hack for Big Deal Days

Customize Safari Toolbar, Favorites, Tab, and Status Bars

Personalize the Safari browser window to suit your style

Tom Nelson is an engineer, programmer, network manager, and computer network and systems designer who has written for Other World Computing,and others. Tom is also president of Coyote Moon, Inc., a Macintosh and Windows consulting firm.

Customize the Toolbar

Return to the default toolbar.

• Bookmarks Are Called Favorites
• Hide or Show the Favorites Bar

Hide or Show the Tab Bar

Hide or show the status bar.

Like many applications, Safari lets you tweak its interface to suit your preferences. You can customize, hide, or show the toolbar, bookmarks bar, favorites bar, tab bar, and status bar. Configuring these Safari interface bars to suit the way you use the browser can save you time and effort.

The toolbar runs across the top of the Safari screen, where the address area is. Here's how to add and remove items to your liking.

From the View menu, select Customize Toolbar .

Select an item you want to add to the toolbar and drag it to the toolbar. Safari will automatically adjust the size of the address and search fields to make room for the new item(s). When you finish, choose Done .

Try adding iCloud Tabs to easily continue browsing sites right where you left off when using other Apple devices. Select Text Size to add the capability to change the size of text on a page quickly.

Alternatively, right-click in an open space in the toolbar and select Customize Toolbar .

You can adjust a couple of other things very quickly, too:

• Rearrange icons in the toolbar by clicking and dragging them to a new location.
• Delete an item from the toolbar by right-clicking it and selecting Remove Item from the pop-up menu.

If you get carried away with customizing the toolbar, and you're not happy with the result, it's easy to return to the default toolbar.

Click and drag the default toolbar set from the bottom of the window to the toolbar.

Click Done .

Safari Favorites Shortcuts

Apple changed the name of the bar from bookmarks to Favorites with the release of OS X Mavericks . No matter what you call the bar, it's a handy place to store links to favorite websites.

Hide or Show the Bookmarks or Favorites Bar 

If you don't use the Favorites bar or want to gain a little screen real estate, you can close the bar. Simply select View > Hide Favorites Bar ( or Hide Favorites Bar , depending on the version of Safari you are using).

If you change your mind and decide you miss the bookmarks bar, go to the View menu and select Show Bookmarks Bar or Show Favorites bar.

In OS X Yosemite and later: Web page titles no longer appear in the toolbar area of the Safari browser if you have the tab bar hidden. Displaying the Tab Bar allows you to see the current page title, even if you don't use tabs.

Like other browsers, Safari supports tabbed browsing , which lets you have multiple pages open without having multiple browser windows open.

If you open a webpage in a new tab, Safari will automatically show the tab bar. If you want the tab bar always to be visible, even if you only have a single web page open, select View > Show Tab Bar .

To hide the tab bar, select View > Hide Tab Bar .

If you have more than one page open in a tab, you'll need to close the tabs before you can hide the tab bar. Click or tap the Close button (the little "X") in a tab to close it.

The status bar displays at the bottom of the Safari window. If you let your mouse hover over a link on a web page, the status bar will show the URL for that link, so you can see where you're going before you click the link. In most cases, this isn't important, but sometimes it's nice to check a URL before you go to the page, especially if the link is sending you to a different website.

• To display the status bar, select View > Show Status Bar .
• To hide the status bar, select View > Hide Status Bar .

Experiment with the Safari toolbar, favorites, tab, and status bars to find what works best for you. Generally, you'll find that having all the bars visible is most helpful, but if you need to maximize your viewing area, closing one or all is always an option.

Get the Latest Tech News Delivered Every Day

• How to Organize Safari Bookmarks and Favorites
• What Is Safari?
• How to Add, Edit, and Delete Bookmarks in iPhone's Safari
• How to Install, Manage, and Delete Safari Extensions
• How to Modify Text Size in the Safari Browser on a Mac
• How to Manage the Top Sites Feature in Safari
• Keyboard Shortcuts for Safari on macOS
• How to Add X (formerly Twitter) to Your Safari Sidebar
• How to Activate and Use Responsive Design Mode in Safari
• How to Pin Sites in Safari and Mac OS
• Back up or Move Your Safari Bookmarks to a New Mac
• How to Reopen Closed Safari Tabs and Windows and Access Past History
• How to Add Safari Shortcuts to an iPhone Home Screen
• How to Reset Safari to Default Settings
• How to Recover Lost Safari Bookmarks
• How to Disable JavaScript in the Safari Web Browser

How-To Geek

How to customize the safari toolbar on your mac.

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.

Quick Links

Why should you customize the safari toolbar, how to customize the safari toolbar.

Safari on the Mac features a minimal interface. Although you don't have a lot of room for customization or theming, you can change the toolbar buttons to suit your productivity style. Here's how to make the Safari toolbar look and work the way you want it to.

By default, the Safari toolbar shows all your enabled extension icons along with the URL bar and navigation buttons.

If you have a lot of extensions, you might want to hide some from the toolbar. You might also want to disable the Sidebar button or the Share button if you're going for a cleaner look.

When you go to customize the Safari toolbar, you'll find a new set of buttons that you can add to the toolbar. Shortcuts such as iCloud Tabs, Top Sites, Home, History, Bookmarks, Zoom, Mail, Print, Web Inspector, and so on.

For a pro user who doesn't like using keyboard shortcuts, fast access to features like Bookmarks and History can be incredibly useful. If you're a web developer, the same goes for the Web Inspector tool.

Related: Mac Users Should Ditch Google Chrome for Safari

Now that we've answered the why, let's get to the how. You can customize the Safari toolbar to your liking by first clicking "View" from the menu bar and then selecting "Customize Toolbar."

This will open a drop-down menu with a visual customization tool for the toolbar. You'll notice that all the icons in the toolbar start to jiggle, signaling that you can now move them around if you like. If you've tried reorganizing your iPhone or iPad home screen , you'll be familiar with this interface.

In the top part of the customization menu, you'll see a list of all available buttons. This is where you'll find new buttons like History or Bookmarks. If you want to add one of these buttons to the toolbar, click on the button, and drag it to the toolbar.

If you want to remove a button, click and drag the icon out of the toolbar area.

You can also customize the look of your Safari toolbar by adding some empty space. Click on the "Flexible space" button---located in the last row---and drag it into the toolbar.

To remove flexible space, click and drag it out of the toolbar.

Now that you understand how every element works, feel free to play around to get the Safari toolbar to look and feel just the way you like it.

• Web Browsers

Tips & Tricks

Troubleshooting, how to customize safari toolbar on mac.

Do you use Safari to browse the web regularly on your Mac? If so, you’ll be excited to know that you can customize Safari’s toolbar just the way you want by adding or removing certain items from it.

Safari is the default web browser on macOS devices and it’s widely used by Mac users, over Google Chrome, Firefox, Opera etc. By default, Safari features buttons to go back/forward, view sidebar, share, tab overview, and of course the address and search bar. However, this can be completely changed according to the features you mostly use. For example, you can add a bookmarks option to the toolbar. Or perhaps, a print option if you often print pages from the web.

If you’re interested in changing the Safari Toolbar to better suit your web browsing, read on to learn how to customize it on the Mac.

Changing your Safari toolbar functionality is a lot easier than you may think. Just follow the steps below to interchange the items that show up in the toolbar.

There you have it, you have customized the Safari toolbar on your Mac.

Apart from adding items to the Safari toolbar, you can also customize your browser window with Favorites bar, Tab bar, and Status bar. To add them, simply click on “View” in the menu bar and choose to show these bars from the dropdown menu.

Another handy trick for many users, particularly advanced web users, is to make Safari show the full URL of website addresses , so that you can see the complete link of any site you’re browsing.

You can also customize the Safari Start Page if you’d like to.

Furthermore, you can take advantage of various keyboard shortcuts to quickly show or hide bookmarks, reading lists, and status bars in Safari too. If you aren’t familiar with Safari’s keyboard shortcuts, you can see some handy ones here , and you’ll also be able to find them in the dropdown menu of various options in the menu bar.

It’s worth mentioning that the ability to customize the toolbar has been in Safari for a very long time, so it does not matter which version of macOS (or Mac OS X) you’re using, the feature will be there. Some particular features are specific to newer Mac OS versions however, like the privacy report .

Did you customize the toolbar in Safari for Mac? Or do you think it’s perfect as it is by default? Share your thoughts, opinions, tips, advice, or whatever else is relevant and on your mind in the comments.

Enjoy this tip? Subscribe to our newsletter!

Get more of our great Apple tips, tricks, and important news delivered to your inbox with the OSXDaily newsletter. 

You have successfully joined our subscriber list.

Related articles:

• Add Items to the Mac Finder Window Toolbar with a Drag & Drop Trick
• How to Add Apps to MacOS Finder Toolbar
• How to Customize Safari Start Page on Mac
• How to Turn Off Split Screen in Safari for iPad? Exiting Safari Split Screen in iPadOS

Leave a Reply

Name (required)

Mail (will not be published) (required)

Subscribe to OSXDaily

• - How to Prepare Your iPhone for iOS 18
• - Which Apple Watch Models Support WatchOS 11? Here’s the List
• - iPadOS 18 is Compatible with These iPads
• - iOS 18 is Compatible with These iPhone Models
• - MacOS Sequoia is Compatible with These Macs
• - iOS 18 is Available to Download Now
• - MacOS Sequoia is Available to Download Now
• - Fun: Don’t Forget to Accept New iCloud Terms & Conditions
• - Release Date for iOS 18, macOS Sequoia, iPadOS 18, is September 16

iPhone / iPad

• - iOS 18 Release Candidate Available to Download Now
• - iPhone 16 & iPhone 16 Pro Announced with Faster Chips & Apple Intelligence Support
• - iOS 18 Beta 8 Available to Download
• - MacOS Sequoia 15 Release Candidate Available to Download Now
• - MacOS Sequoia 15 Beta 8 Available to Download
• - How to Run Llama LLM on Mac, Locally
• - How to Recover an Unsaved PowerPoint on Mac
• - How to Uninstall VMWare Fusion on Mac
• - chronod on Mac – High CPU Use & Network Access Requests Explained
• - Why Are iPhone Videos Low Quality & Blurry When Sent to Android Users?
• - Fix brew Error “The arm64 architecture is required for this software” on Apple Silicon Mac

About OSXDaily | Contact Us | Privacy Policy | Sitemap

This website is unrelated to Apple Inc

All trademarks and copyrights on this website are property of their respective owners.

© 2024 OS X Daily. All Rights Reserved. Reproduction without explicit permission is prohibited.

Choose a browser that protects your privacy. Switch to Safari

Blazing fast. Incredibly private.

Safari is the best way to experience the internet on all your Apple devices. It brings robust customization options, features powerful privacy protections, and optimizes battery life — so you can browse how you like, when you like. And when it comes to speed, it’s the world’s fastest browser. 1

Privacy is built in.

Safari comes with industry-leading privacy protection technology built in, including Intelligent Tracking Prevention that identifies trackers and helps prevent them from profiling or following you across the web. And Private Browsing adds even more protections, such as locking your windows when you’re not using them. Online privacy isn’t just something you should hope for — it’s something you should expect.

Intelligent Tracking Prevention

Safari stops trackers in their tracks.

What you browse is no one’s business but your own. Safari has built‑in protections to help stop websites and data-collection companies from watching and profiling you based on your browsing activity. Intelligent Tracking Prevention uses on‑device intelligence to help prevent cross‑site tracking and stops known trackers from using your IP address — making it incredibly difficult to learn who you are and what you’re interested in.

Privacy Report

Safari makes it simple to see how your privacy is protected on all the websites you visit. Click Privacy Report in the Safari menu for a snapshot of cross-site trackers currently prevented from profiling you on the website you’re visiting. Or view a weekly Privacy Report to see how Safari protects you as you browse over time.

Browser Privacy

Performance, more with the battery. less with the loading..

With a blazing-fast JavaScript engine, Safari is the world’s fastest browser. 1 It’s developed to run specifically on Apple devices, so it’s geared to make the most out of your battery life and deliver long-lasting power.

Increased performance

We’re always working to make the fastest desktop browser on the planet even faster.

Improved power efficiency

Safari lets you do more online on a single charge.

Up to 4 hours more streaming videos compared with Chrome 3

Up to 18 hours of video streaming 3

Best-in-class browsing

Safari outperforms both Mac and PC browsers in benchmark after benchmark on the same Mac. 4

• JetStream /
• MotionMark /
• Speedometer /

JavaScript performance on advanced web applications. 4

Safari vs. other Mac browsers

Safari on macOS

Chrome on macOS

Edge on macOS

Baseline: Firefox on macOS

Safari vs. Windows 11 browsers

Chrome on Windows 11

Edge on Windows 11

Baseline: Firefox on Windows 11

Rendering performance of animated content. 4

Web application responsiveness. 4

4K video streaming

See your favorite shows and films in their best light. Safari supports in-browser 4K HDR video playback for YouTube, Netflix, and Apple TV+. 5 And it runs efficiently for longer-lasting battery life.

Customization

Putting the you in url..

Safari is more customizable than ever. Organize your tabs into Tab Groups so it’s easy to go from one interest to the next. Set a custom background image and fine-tune your browser window with your favorite features — like Reading List, Favorites, iCloud Tabs, and Siri Suggestions. And third-party extensions for iPhone, iPad, and Mac let you do even more with Safari, so you can browse the way you want across all your devices.

Safari Profiles allow you to separate your history, extensions, Tab Groups, favorites, cookies, and more. Quickly switch between profiles for topics you create, like Personal and Work.

Web apps let you save your favorite websites to the Dock on Mac and to the Home Screen on iPhone and iPad. A simplified toolbar and separate settings give you an app-like experience.

Safari Extensions add functionality to your browser to help you explore the web the way you want. Find and add your favorite extensions in the dedicated Safari category on the App Store.

Save and organize your tabs in the way that works best for you. Name your Tab Groups, edit them, and switch among them across devices. You can also share Tab Groups — making planning your next family trip or group project easier and more collaborative.

Smart Tools

Designed to help your work flow..

Built-in tools create a browsing experience that’s far more immersive, intuitive, and immediate. Get detailed information about a subject in a photo with just a click, select text within any image, instantly translate an entire web page, and quickly take notes wherever you are on a site — without having to switch apps.

Notes is your go-to app to capture any thought. And with the Quick Note feature, you can instantly jot down ideas as you browse websites without having to leave Safari.

Translation

Translate entire web pages with a single click. You can also get translations for text in images and paused video without leaving Safari.

Interact with text in any image or paused video on the web using functions like copy and paste, translate, and lookup. 6

Visual Look Up

Quickly learn more about landmarks, works of art, breeds of dogs, and more with only a photo or an image you find online. And easily lift the subject of an image from Safari, remove its background, and paste it into Messages, Notes, or other apps.

Surf safe and sound.

Strong security protections in Safari help keep you safe. Passkeys introduce a safer way to sign in. iCloud Keychain securely stores and autofills passkeys and passwords across all your devices. Safari also notifies you when it encounters suspicious websites and prevents them from loading. Because it loads each web page in a separate process, any harmful code is always confined to a single browser tab so it won’t crash the entire application or access your data. And Safari automatically upgrades sites from HTTP to the more secure HTTPS when available.

Passkeys introduce a more secure and easier way to sign in. No passwords required.

Passkeys are end-to-end encrypted and safe from phishing and data leaks, and they are stronger than all common two-factor authentication types. Thanks to iCloud Keychain, they work across all your Apple devices, and they even work on non-Apple devices.

Learn more about passkeys

Apple Pay and Wallet make checkout as easy as lifting a finger.

Apple Pay is the easiest and most secure way to shop on Safari — allowing you to complete transactions with Face ID or Touch ID on your iPhone or iPad, with Touch ID on your MacBook Pro or MacBook Air, or by double-clicking the side button on your Apple Watch.

Learn more about Apple Pay

With AutoFill, you can easily fill in your previously saved credit card information from the Wallet app during checkout. Your credit card details are never shared, and your transactions are protected with industry-leading security.

Same Safari. Different device.

Safari works seamlessly and syncs your passwords, bookmarks, history, tabs, and more across Mac, iPad, iPhone, and Apple Watch. And when your Mac, iOS, or iPadOS devices are near each other, they can automatically pass what you’re doing in Safari from one device to another using Handoff. You can even copy images, video, or text from Safari on your iPhone or iPad, then paste into another app on your nearby Mac — or vice versa.

When you use Safari on multiple devices, your tabs carry over from one Apple device to another. So you can search, shop, work, or browse on your iPhone, then switch to your iPad or Mac and pick up right where you left off.

Save web pages you want to read later by adding them to your Reading List. Then view them on any of your iCloud-connected devices — even if you’re not connected to the internet.

iCloud Keychain securely stores your user names, passkeys, passwords, and credit card numbers and keeps them up to date on your trusted devices. So you can easily sign in to your favorite websites — as well as apps on iOS and iPadOS — and quickly make online purchases.

Designed for developers.

Deep WebKit integration between Mac hardware and macOS allows Safari to deliver the fastest performance and the longest battery life of any browser on the platform, while supporting modern web standards for rich experiences in the browser. WebKit in macOS Sequoia includes optimizations that enable even richer browsing experiences, and give developers more control over styling and layout — allowing for more engaging content.

Make Safari your default browser

Customize your start page, view your browsing privacy report, monitor your saved passwords, use apple pay in safari, view your tabs across all your devices, read the safari user guide, get safari support.

Using Bottom Tab Bars on Safari iOS 15

Jun 17, 2021 (Updated Sep 23, 2021)

Apple recently announced the latest version of Safari on iOS 15 with a completely new design featuring a bottom floating tab bar. What does this mean for web developers and designers?

Safari on iOS has had a problem for a long time when it comes to building websites and web apps with bottom-aligned navigation due to the browser toolbar's dynamic height. As you scroll the toolbar disappears making any element that is fixed to the bottom of the screen look great, but as soon as you try to tap any link inside the browser toolbar appears again.

Sorry, your browser doesn't support embedded videos.

This makes for a really poor UX so designers and developers have mostly resorted to user "hamburger" menus instead. This is a shame as bottom tab bars increase discoverability by not hiding links behind a tap and are also easier to reach one-handed on todays large mobile devices.

Updates with Safari 15

Apple reverted some of these changes in the final iOS 15 release. The user can now choose between the old UI (top bar) or the new one. If they choose the new bottom bar UI it does not float as much greatly improving overlap issues. While you might not need safe areas anymore if you're lucky, I would still recommend to implement it as I've seen it cause issues anyways.

The new Safari 15 now has a tab bar floating at the bottom of the screen. At first it might seem like this makes it even harder to create tab bar navigations, and by browsing the web using iOS 15 it's easy to spot issues like this:

Fixing Tab Bar Overlap with Safe Areas

Thankfully solving this issue is very easy by using the env() CSS function together with safe-area-inset-bottom . This API was shipped with iOS 11 making it possible to customize how websites render when using devices with a notch. By inspecting pinterests code we can see that their tab bar has a fixed position anchored to the bottom, the relevant parts look something like this:

To respect the safe area and make sure that nothing from the browser UI overlaps let's add another bottom property with env(safe-area-inset-bottom) as a value. This function works like a CSS variable, returning the minimum amount of inset needed to keep your UI from overlapping with the browser's. We keep the old style rule as a fallback browsers that do not support it:

Now when scrolling nothing overlaps:

Be sure to use env() every time something is anchored to the bottom of the screen or overlap will likely appear. env() can also be combined with css calc() or min() and max() , so if your design needs more padding you can add it like this:

You can learn more about respecting the safe-area in this excellent article published on the webkit blog or Apple's WWDC session called Design for Safari 15 (Relevent part starts around 13 minutes in).

The best way to see if you got it right is to use a physical device with iOS 15, but if you don't have access to one you can download the Xcode 13 beta from Apples developer portal and use an iOS 15 simulator by going to Xcode > Open Developer Tool > Simulator

Tab Bar UX in iOS 15

Remember the issue in previous versions of Safari where you had to click twice when using bottom tab bars? Once for showing the safari toolbar and another tap for actually triggering your link? That is no longer an issue 🙌. Safari 15 now respects and follows links or buttons, which is a big improvement! Check out how much better Twitter's tabbar works when switching tabs on Safari 15:

Even if tab bars now technically work better than before we still have to consider the design and UX to create something that people understand and that looks good. The browser UI is now very bottom-heavy and placing more actions next to it might feel cluttered. What do you think? Let me know on twitter @samuelkraft .

I'm excited to see how everyone adapts to the new UI and if we will see a return of tab bars on the web or not.

Get an email when i write new posts. Learn animation techniques, CSS, design systems and more

Related posts

Dec 18, 2021

Dec 15, 2021

Sep 07, 2021

• 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.

To include a device frame when capturing a screenshot in Device-specific mode , first Show device frame , and then click Capture screenshot as directed previously.

To learn other ways to take screenshots with DevTools, see 4 ways to capture screenshots with DevTools .

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 Simulate Mobile Devices with Device Mode in Chrome

Share this article

Developer Tools

Touch-enabled emulation, the mobile emulator device toolbar, css media query bars, emulated device options, bandwidth throttling simulation, emulated mobile sensors, remote real device debugging, great i don’t need any devices now, faqs about chrome mobile emulator.

Website testing has become increasingly complex. The days of checking functionality in a couple of browsers are long gone. Your latest masterpiece must be rigorously evaluated on a range of mobile, tablet and desktop devices with differing OSs, screen resolutions, and capabilities. In extreme cases, it could take as long as the original development.

The process is complicated further by touch screens, hybrid devices, and high-density displays. If you’re coding on a regular PC with a mouse and keyboard, it’s difficult to appreciate how your interface will operate. Features such as mouse hover won’t necessarily work and your application could be inoperable. But how can you test your code on a range of operating systems during development and avoid the pain of managing and switching between multiple devices?

Fortunately, all modern browsers offer mobile emulation tools, and one of the best can be found in the Chrome browser. It can help identify early problems without leaving the comfort of your PC and development environment.

Start Chrome, navigate to the web page you want to test and open the Developer Tools (Menu > Tools > Developer Tools, Cmd + Opt + I on macOS or F12 / Ctrl + Shift + I on Windows and Linux).

You can now enable the browser emulator by clicking the Toggle device toolbar icon in the top left:

A device simulation will now appear:

While not quite an iOS or Android emulator, a number of mobile devices running both platforms can be selected as presets. The dimensions of the emulated screen can be changed when Responsive is selected as the device type.

Move your mouse over the device to see a circular “touch” cursor. This will react to touch-based JavaScript events such as touchstart , touchmove and touchend . Mouse-specific events and CSS effects should not occur.

Hold down Shift then click and move your mouse to emulate pinch zooming.

It’s worth spending a little time familiarizing yourself with the toolbar and menu above the Chrome emulator:

The default controls are:

• the device type (or Responsive )
• the current resolution
• the scale (the screen can be zoomed in or out to fit better in the emulator pane)
• the network speed
• a portrait/landscape toggle button

The three-dot menu allows you to show or hide additional controls:

• the device frame (if available, a graphic of the phone or tablet)
• CSS media query bars (see below )
• a pixel ruler
• add device pixel ratios
• add device types
• capture a screenshot (including the device frame if shown)
• capture a full-page screen shot

Select Show media queries from the three-dot menu to view a graphical color-coded representation of all media queries set in the CSS.

• BLUE: queries which target a maximum width
• GREEN: queries which target widths within a range
• ORANGE: queries which target a minimum width

Any bar can be clicked to set the emulator screen to that width.

The drop-down menu on the left allows you to select a device. Several dozen presets are provided for popular smart phones and tablets, including iPhones, iPads, Kindles, Nexus tablets, Samsung Galaxy, and so on.

Not all devices are presented at once. Click Edit… at the bottom of the device drop-down or click the DevTools Settings cog icon and choose the Devices tab:

You can enable or disable devices or enter your own by defining:

• a classification such as “Mobile” or “Tablet”
• a browser user agent string
• the device resolution
• and pixel ratio (such as 2 for iPhone Retina screens where the pixel density is twice as high as the reported viewport resolution)

All browsers identify themselves with a user agent string sent on every HTTP header. This can be examined on the client or server-side and, during the dark days of web development, would be used to modify or provide a different user experience. In extreme cases, the viewer would be directed to a different site. The technique was always flawed but has become largely redundant owing to Responsive Web Design techniques, and it was unsustainable given the number of devices available on the market.

The throttling drop-down allows you to emulate slow network speeds typically experienced on mobile connections or dodgy hotel and airport Wi-Fi! You can use this to ensure your site or application loads quickly and remains responsive in all environments.

The throttling drop-down is available in the Network tab and Chrome’s device toolbar. You can set your own bandwidth configuration by clicking the DevTools Settings cog icon and choosing the Throttling tab:

Click Add custom profile then enter:

• the profile name
• the download speed in kilobits per second
• the upload speed in kilobits per second
• the latency in milliseconds (the typical delay when making a network request)

Smartphones and tablets often have sensors such as GPS, gyroscopes, and accelerometers, which aren’t normally present in desktop devices. These can be emulated in Chrome by choosing More tools , then Sensors from the Developer Tools main three-dot menu:

A new pane appears which allows you to define:

• The current latitude and longitude or select a major city from the drop-down. You can also select Location unavailable to emulate how your application reacts when the device cannot obtain a reliable GPS signal.
• The orientation. Several presets are available or you can move the device image by clicking and dragging.
• The touch response.
• An idle state to examine how an app reacts to a lock screen.

Finally, Google Chrome allows you to connect a real Android device via USB for remote device debugging. Enter in the address bar, ensure Discover USB devices is checked, then attach your phone or tablet and follow the instructions.

Chrome allows you to set up port forwarding so you can navigate to a web address on your local server on the device. Chrome’s preview pane shows a synchronized view of the device screen and you can interact either using the device or Chrome itself.

The full range of developer tools can be used including the Application tab to test Progressive Web Apps in offline mode. Note that, unlike a real application which requires HTTPS, Chrome permits PWAs to run from localhost over an HTTP connection.

Chrome’s mobile browser emulator is useful and powerful, but it’s no substitute for interacting with your website or app on a real device to evaluate the full user experience.

You should also be aware that no device emulator is perfect. For example, Chrome shows a representation of the page on an iPhone or iPad but will not attempt to simulate the standards support or Safari quirks.

That said, for quick and dirty mobile testing, Chrome’s device emulation is excellent. It’s far easier than switching between real smart phones, and you’ll have all the developer tools at your disposal. It saves hours of effort.

What is Chrome Mobile Emulator?

Chrome Mobile Emulator is a feature provided by the Google Chrome web browser that allows users to simulate the experience of browsing the web on a mobile device directly from their desktop or laptop computer. This emulator is a part of the Chrome Developer Tools, a set of built-in tools designed to assist web developers in testing and optimizing their websites and web applications. With the Chrome Mobile Emulator, developers can select from a range of predefined mobile device profiles, such as various Android and iOS devices, and view their websites as they would appear on those specific devices. It allows developers to test responsiveness, ensuring that their websites or web apps adapt and display correctly on a variety of mobile devices. Chrome Mobile Emulator serves as a valuable tool for web developers, helping them ensure that their websites and web applications are mobile-friendly and provide a seamless user experience across a wide range of mobile devices. It accomplishes this by offering a comprehensive set of emulation features within the Chrome Developer Tools, making it easier to develop and optimize mobile web content without the need for physical access to multiple devices.

How to simulate a mobile device on Chrome?

To simulate a mobile device on the Google Chrome web browser, you can use the built-in developer tools. Here’s how to do it: Open Developer Tools: There are several ways to open Chrome’s Developer Tools. You can press F12 or Ctrl+Shift+I ( Cmd+Option+I on Mac) on your keyboard. Alternatively, right-click on a web page element and select “Inspect” from the context menu. You can also go to the Chrome menu (three dots in the top-right corner) > More Tools > Developer Tools . Toggle Device Toolbar: In the Developer Tools panel, you’ll find various tabs at the top. Look for the “Toggle Device Toolbar” icon, which is usually represented by a small device icon. It’s commonly located in the top-left corner of the Developer Tools panel. You can also activate it by pressing Ctrl+Shift+M ( Cmd+Option+M on Mac) on your keyboard. Choose a Device: Click on the “Toggle Device Toolbar” icon, and you’ll see a toolbar appear at the top of the web page. This toolbar allows you to select a specific device or device type from the dropdown menu. You can choose from various Android or iOS devices. Additionally, you can toggle the device orientation between portrait and landscape and adjust the viewport dimensions by clicking on the dimensions display. You can select from available presets or enter custom dimensions. Reload the Page: After selecting the desired device and orientation, you can simply refresh the web page you’re viewing. Chrome will then render the page as if it were displayed on the selected mobile device. You can interact with the page and test its responsiveness just as you would on a real mobile device. Access Additional Features: Within the Device Toolbar, you can use the “Network Conditions” tab to simulate different network speeds and conditions. This helps you evaluate how your website or web application performs under various network conditions. Additionally, the “Sensors” tab allows you to simulate various sensor inputs, such as geolocation.

Why is Chrome Mobile Emulator not accurate?

Chrome Mobile Emulator may not provide perfect accuracy in simulating the user experience on real mobile devices for several reasons. It primarily emulates the behavior of the Chrome browser, which may differ from other browsers used on mobile devices. Additionally, emulators cannot fully replicate hardware capabilities, varying operating systems, network complexities, and device-specific behaviors. Interaction methods, such as touch events, might not precisely mimic real devices. Moreover, emulators may not always keep up with the latest updates and changes in browsers and devices. While valuable for initial testing, using actual mobile devices for testing remains crucial to ensure a more accurate assessment of website or app performance across diverse platforms.

Can Chrome emulate Android?

Yes, Chrome Mobile Emulator is a feature provided by Chrome that allows users to simulate the experience of browsing the web on a mobile device directly from their desktop or laptop computer.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler .

Safari User Guide

• Get started
• Go to a website
• Get highlights
• Bookmark webpages to revisit
• See your favorite websites
• Use tabs for webpages
• Hide distractions when browsing
• Apple Pay in Safari
• Apple Pay in third-party browsers
• Autofill credit card info
• Keep a Reading List
• Hide distractions when reading
• Translate a webpage
• Hide distractions when watching videos
• Download items from the web
• Add passes to Wallet
• Save part or all of a webpage
• Print or create a PDF of a webpage
• Interact with text in a picture
• Change your homepage
• Customize a start page
• Create a profile
• Block pop-ups
• Make Safari your default web browser
• Hide your email address
• Manage cookies
• Clear your browsing history
• Browse privately
• Prevent cross-site tracking
• See who tried to track you
• Change Safari settings
• Keyboard and other shortcuts

Use the developer tools in the Develop menu in Safari on Mac

If you’re a web developer, the Safari Develop menu provides tools you can use to make sure your website works well with all standards-based web browsers.

If you don’t see the Develop menu in the menu bar , choose Safari > Settings, click Advanced, then select “Show features for web developers.”

Open Safari for me

View in English

Web development tools

Apple has brought its expertise in development tools to the web. Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize websites for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can preview your web pages in various screen sizes, orientations, and resolutions. Access these tools by enabling the Develop menu in Safari’s Advanced preferences.

Web Inspector

Web Inspector is your command center, giving you quick and easy access to the richest set of development tools ever included in a web browser. It helps you inspect all of the resources and activity on a web page, making development more efficient across Apple platforms. The clean, unified design puts each core function in a separate tab, which you can rearrange to fit your workflow. You can even debug memory using Timelines and tweak styles using widgets for over 150 of the most common CSS properties.

Elements. View and inspect the elements that make up the DOM of a web page. Clicking elements from the fully editable markup tree on the left reveals the node’s styles in the middle sidebar, with more details in the right sidebar.

Console. Type JavaScript commands in the console to interactively debug, modify, and get information about your webpage. View logs, errors, and warnings emitted from a webpage, so you can identify issues fast and resolve them right away.

Sources. Find every resource of a webpage, including documents, images, scripts, stylesheets, and more. Use the built-in debugger with data type and code highlights to troubleshoot and understand the script execution flow.

Network. See a detailed list of all network requests made to load every web page resource, so you can quickly evaluate the response, status, timing, and more.

Timelines. Understand all the activity that occurs on an open web page, such as network requests, layout and rendering, JavaScript events, memory, and CPU impact. Everything is neatly plotted on a timeline or recored by frame, helping you discover ways to optimize your site.

Storage. Find details about the data stored by a web page, such as application cache, cookies, databases, indexed databases, local storage, and session storage.

Graphics. Preview animation keyframes and their classes from HTML5 canvas, JavaScript animations, CSS animations, and CSS transitions. Dial in the motion and the visual design of web pages.

Layers. Visualize compositing layers in 3D to understand where layers are generated and in what order they'll render. Use layers to help find unexpected memory consumption or excessive repaints on a web page.

Audit. Preform audits against a web page to certify that common code and accessibility errors are addressed. Confirm that a web page follows design guidelines and specifications of modern web pages.

Responsive Design Mode

Safari has a powerful new interface for designing responsive web experiences. Responsive Design Mode provides a simple interface for quickly previewing your web page across various screen sizes, orientations, and resolutions, as well as custom viewports and user agents. You can drag the edges of any window to resize it. And you can click on a device to toggle its orientation, taking it from portrait to landscape — and even into Split View on iPad.