Features of Responsive Design Mode

The various features of this mode are:

• Preloaded device sizes: There are various devices such as smartphones, tv and laptops sizes that are present by default in this mode. You also get a option to add your own custom device settings.
• Various Throttling options: You can use this mode to change the network speed and check the behaviour of the browser. This helps in debugging loading problems that occur in slow network.
• Touch Feature: You can also simulate touch based interaction using this mode. If the touch simulation is enable than all mouse events get translated to touch events.
• Orientation of the device: You can change the orientation of the device from portrait to landscape or vice versa. This helps to check is the web page is responsive for the change in the orientation.
• Modify Device Pixel Ratio (DPR): Allows you to test devices with varying pixel density by changing the DPR values. Web page can be changed for screens having higher density pixels.

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.