FireFox: Responsive Design View

Mozilla’s FireFox allows to install developer tools to extend FireFox functionality and also useful to develop Plug-ins or Add-ons. One of the developer tool is “Responsive Design View” which is useful to provide a presentation that is suitable for different kinds of devices, such as mobile phones or tablets. To test this, first we need to enable it.

Step (1). Click on Firefox icon; which is on top-left corner of Firefox window. Firefox will display a pull-down menu.

Mozilla FireFox - Web Developer menu

Mozilla FireFox – Web Developer menu

Step (2). Select “Web Developer” from pull-down menu. It will display a sub-menu.

Step (3). From sub-menu, select “Responsive Design View” menu item. FireFox will open the website into responsive design view. 

Mozilla FireFox - Responsive Design view

Mozilla FireFox – Responsive Design view

You can also enable “Responsive Design View” by clicking on “Ctrl + Shift + M” keys from the keyboard.

Step (4). In responsive design view we can check the website’s look and feel that is suitable for different kinds of devices, such as mobile phones or tablets.

  • We can use responsive design view controls to adjust the width and height of the content area. Select the size from the combo box. Above screenshot displays the codesteps.com website in 320×495 dimension.
  • Click on Rotate icon which is next to size combo box is to rotate the content area.
  • Simulate touch events icon is useful to enable or disable touch event simulation. If it is enabled, mouse events will behave like touch events.
  • Use Screenshot icon to take the screenshot of the content area. It will automatically saved into the disk.
  • You can also re-size content area by dragging the re-size controls which are on edges of the content area.

Once you done with responsive design view, click on Close button in content area, to close responsive design view and the website will display in normal view.

by Code Steps

Leave a Reply