4

I thought this would be easy, but turns out it's not. I need to set the Firefox viewport size to a given value (larger than my screen resolution). What I want is not to enlarge the application window, but to enlarge the size available to the html content. The viewport won't be physically larger, but will "tell" the html that it is, so that webpages will take more space (obviously making scrollbars visible).

For example, let's say my physical Firefox window is 800x600 px. I'd like to set "viewport size=2", then the available space for the html to render would be 1600x1200.

Web Developer has a resize feature but it doesn't work when you set a size larger than your screen resolution (in Windows 7).

Thanks in advance (I hope my explanation makes some sense).

studiohack
  • 13,490
Francesco De Vittori
  • 165
  • 1
  • 6

4 Answers4

1

You should be able to do so by manually setting the width of the <html> element with Web Developer's "edit CSS" feature. This would force the content to a give size and you would get horizontal scrollbars, etc. depending on your window size. You could even make a bookmarklet for that for quicker access.

Andrei
  • 1,026
  • 7
  • 8
  • 1
    Wow, that would imply that CSS could resize my browser? I don't think so... – Arjan Jun 12 '10 at 23:00
  • 1
    Well, no, but the asker was looking for the way of resizing the viewport, not the window. So no, you would have to use Javascript to resize the browser window. – Andrei Jun 13 '10 at 18:08
0

This is an old thread, but I'll add an alternative solution (that works well for screenshots, too).

You can change your viewport to match that of a mobile device, but you can set your mobile device screen dimensions to arbitrary values. In Developer Tools (3-line menu > More tools > Web Developer Tools), there is a little icon showing a phone and tablet. It is along the top near the "X" button that closes the tools.

Mobile Devices button

This should open up a view with a new viewport. This is called "Responsive Design Mode." On the top toolbar (under the URL bar), you can set the viewport dimension.

Viewport dimensions input

The viewport will match the dimensions input into this dimension field.

tedtanner
  • 101
0

You can zoom in or out on a web page using ctrl + mouse wheel.

This way you can show much more of the web page then is set buy your default screen resolution. But it wont tell you what the actual resolution is. You then need to use the ruler widget that comes with web developers addon to see the relative resolution. It scales to your zoom level.

nelaaro
  • 13,581
  • 30
  • 85
  • 114
0

No, your question does not make any sense. The viewport is just the size of the client area of the Window, which obviously cannot be make larger than your screen resolution. HTML code neither knows nor cares about viewport size: that is, html elements are sized arbitrarily without any need to consider the physical equipment that is used later to render the page.

kreemoweet
  • 4,663
  • 1
    this is incorrect. HTML elements are rendered accordingly to the available space. For ex. the html root element takes (by default) 100% of the available width, i.e. it's at least as wide as the viewport. So you can "fool" the html engine into thinking that the viewport has a given size, different than the actual browser client area (see @Andrei's answer). – Francesco De Vittori Nov 05 '12 at 08:37