How to test what a webpage/web app will look like with Firefox on a specific screen resolution

Question

I have the task of testing a web application where it is given that this app should fit a screen with the resolution of 1280*1024.

My work monitor is, however, a 20 inch screen with resolution 1680*1050.

Will resizing the Firefox window to 1280*1024 meet the test criteria or should I always change the resolution of my monitor? (Obviously, the second option is not preferred).

And also: Is there a Firefox plugin which will help me to set the window size appropriately?

Answer 1

Responsive Design Mode is a stock part of Firefox which is available from the Menu Bar: Tools -> Web Developer -> Responsive Design View in all Firefox versions (keyboard shortcut: Ctrl + Shift + M, (or Cmd + Opt + M on OS X)). No extension is needed to access this mode.

Within Responsive Design Mode, you can set the exact display area used for the webpage. There are several preset dimensions. Alternately, custom display dimensions can be used by either directly typing the dimensions in, or dragging the display to the size desired. What is being set is the pixel dimensions used for the area containing the display of the webpage.

These dimensions are not the same as setting the pixel dimensions used for the entire screen, which would include the Firefox user interface. If you set it to the dimensions of a specific physical display size it is the same as would be displayed using Full Screen mode (on desktop versions, keyboard shortcut F11). If you want to see what your page will look like including the Firefox user interface, you will need to determine how many pixels the user interface consumes at the screen resolution you are interested in and on the platform you are intending to use (e.g. desktop, Android, iOS). You will then need to use a custom display size. Note that the amount of room used for the Firefox user interface will depend on many factors which include—in addition to the OS and resolution of the physical display—any theme the user has installed, which toolbars the user has chosen to display, and, potentially, which add-ons the user has installed.

This is what Responsive Design Mode looks like: