App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Home Guide How to enable Responsive Design Mode in Safari and Firefox?

How to enable Responsive Design Mode in Safari and Firefox?

By Jash Unadkat, Community Contributor -

Table of Contents

Prior to the tutorial, it is important to understand what is responsive design mode.

What is Responsive Design Mode?

A responsive design mode is a standard feature available across leading browsers like Chrome, Safari, Firefox, etc. It primarily enables web users or developers to modify the resolutions of a web page to view the mobile or tablet versions of the web page.

Using Responsive Design mode, a developer can verify whether the web page can appropriately resize the content on different resolutions.

Now, let’s understand how one can enable the responsive design mode in Safari in Firefox.

Responsive Design Mode in Safari

Note: To start with, bear in mind that the Developer menu is, by default, disabled for the Safari browser. In order to access the Responsive Design Mode, enable the Safari Develop menu.

To enable the Responsive mode in Safari, follow the steps listed below:

  1. Launch the Safari browser
  2. Click Safari -> Preferences -> Advanced
  3. Select the checkbox -> Show Develop menu in the menu bar.

Responsive Design Mode in Safari

Once the Develop menu is enabled, ‘Enter Responsive Design Mode’ will show up in the menu bar, as shown in the image below:

How to Enable Responsive Design Mode in Safari

Note: It’s vital to bear in mind that this feature is built to check the responsive design in Safari. For verifying or testing the features, functions, and offerings of a website, it is best to opt for a platform that offers a real device cloud for interactive testing. Try for Free.

Now, to view the mobile version of a web page using Safari responsive design mode:

  1. Launch Safari.
  2. Navigate to the target URL that needs to be loaded in mobile view.
  3. Click on the Develop menu and select Enter Responsive Design Mode.
  4. As shown in the image below, the target URL (Wikipedia in this example) can be viewed on the desired device (like an iPad or iPhone).

Responsive Design Mode in Safari Example

If developers or users need to inspect any particular element for debugging a specific issue, they can use the web inspector feature. One can find the web inspector in the Develop menu. Once the web inspector is active, inspect a particular element using the element selector.

Refer to the image below:

Element Selector in Safari Responsive Mode

That’s how one can use the responsive design mode in Safari.

Responsive Design Mode in Firefox

To use the responsive design mode in Firefox, follow three simple steps:

  1. Launch Firefox.
  2. Navigate to the desired web page that needs to be loaded in mobile view.
  3. Click on the hamburger menu on the top right -> click More Tools -> Responsive Design Mode. One can also use the shortcut keys Ctrl + Shift + M to directly open the responsive design mode in Firefox.

Enable Responsive Design Mode in Firefox

Once you click on the responsive design mode, the web page will be rendered in a mobile view of your choice. As shown in the image below, one can manually define the resolution or choose from a set of widely used mobile handsets.

Select Device in Firefox Responsive Design Mode

That’s how one can use responsive mode in Firefox.

Note: The approach illustrated above simulates different viewports on a desktop browser. It is not an accurate way to test the mobile version of a website on Safari or Firefox, as it is just a device simulation. It cannot simulate all aspects of a real mobile device or real user conditions.

An ideal way of testing a website for responsiveness is to test it on real devices. One can opt for an online responsive checker tool that allows you to load pages on real devices.

To run live interactive tests and debug on actual mobile handsets remotely, one can also leverage BrowserStack Live. It allows you to run website tests on the desired mobile handsets from popular vendors like Samsung, Apple, OnePlus, Motorola, Google, etc.

One simply needs to Signup for free -> Navigate to the Live dashboard -> Select the desired device-browser-OS combination and start testing on a real device directly from the browser. 

Let’s consider testing on Chrome on Samsung S22. 

The image below represents the Live dashboard. Here users can select the device-browser-OS combination of their choice.

BrowserStack Live Dashboard

Once the user selects the desired device-browser-OS combination, a new session is initiated on that specific device. (Chrome on Samsung S22 in this case).

Real Mobile Device on BrowserStack Live Dashboard

Now users can interact with the website on that particular real device. Users can scroll through the website, interact with specific web elements and verify whether there are any rendering issues.

Try Live Testing on Real Devices for Free

The methods demonstrated above will help web users or developers leverage the responsive design mode in their respective browsers. Using this feature will help them validate the ability of web pages to resize their content for an optimal viewing experience.

Tags
Cross browser testing Manual Testing Responsive Website Testing

Featured Articles

Cross Browser Testing vs Responsive Design Testing – what should I do?

Defining Breakpoints in Responsive Web Design

How to Perform Responsive Testing for a Locally Hosted Website