Programmatically zoom out web page

Question

We build a web application which works perfect on 19" screen (runs on Firefox as a KIOSK). It includes lots of images and content text placed around those images. It was working just fine till we changed the device to a 18.5" screen. Now, it has scrollbars around it. The content and images dont fit. We need to zoom out firefox to fit it completely on the screen, but this is not what we want.

Is there a way to zoom everything in the page to a level like 90% of normal size. So we dont have to manually zoom out Firefox?

Answer 1

The physical size of the monitor is not important. What matters is the resolution displayed on that screen. Find out what the old screen's resolution was set to, and see if the new screen supports the same one. If it does, great, set it to that. If not, you might be better off reworking the layout to work on more than just one specific resolution...

Answer 2

The solution has 2 steps:

1. Make everything except fonts flexible. For example: tables, divs, menus.
2. Edit the font size.

Editing font size also makes website look bigger and smaller.

Answer 3

You might be able to use transform: scale(.9) on the body element. Although in the future I would recommend building a responsive design using media queries instead.

That would be -moz-transform: scale(.9) for Firefox specifically.