Various options of Responsive Design Mode

The mode provides various options relate to the simulation of the device.

• Device Name: This is a drop-down list to select device or add a custom device.
• Screen size: Displays width and height of the selected device which can you can also edit. At the bottom-right corner of the preview there is three lines allowing dragging of the viewport according to your requirement but this change will make the device name to display Responsive.
• Device Orientation: You can click this button to change the orientation of the device from portrait to landscape or vice versa.
• DPR (Device Pixel Ratio): Used to increase or decrease the DPR for responsive mode, if some device is selected then this is greyed out which indicates that the value can’t be changed.
• Throttling: This is drop-down list used to simulate the network speeds such as 2G, 3G etc. This is used to emulated download and upload speeds.
• User Agent: Specifies the browser, device OS and device brand that you are simulating.
• Touch simulation: Click it to toggle touch simulation which will translate all you mouse interactions to touch.
• Screenshot: Use this button to take a screenshot of the webpage preview which automatically saves in the downloads folder.
• Settings: Provides various settings for the mode which are left-align viewport, show user agent, reload when touch simulation is toggled and reload when user agent is changed.
• Close: Use this button to close the mode.

All web pages which are design for multiple devices having varying screen width must have a responsive design. These design can have relative layout and/or reflowing content. To inspect the responsive design of a web page Firefox provides a mode for simulating various screen sizes, throttling and touch.