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?

possible duplicate of [Changing the browser zoom level](http://stackoverflow.com/questions/1055336/changing-the-browser-zoom-level) — Rory McCrossan, Apr 08 '12 at 13:43

powerbuoy · Accepted Answer · 2012-04-08T13:55:44.050

2

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.

edited Apr 08 '12 at 13:55

answered Apr 08 '12 at 13:43

powerbuoy

12,460
7
48
78

I added -moz-transform: scale(90%) but nothing happened. Is there anything more to add? – Hüseyin Z. Apr 08 '12 at 13:52
There is one big catch - Firefox does NOT handle transform:scale() properly - it zooms out but also moves the content from top and left to the bottom and right - depending on how big is the zoom out - is there a way to avoid it ? So mozilla would just really resize the page without moving it from the e.g. center of a page? Thanks... – jave.web Jul 03 '13 at 15:22

score 1 · Answer 2 · answered Apr 08 '12 at 13:43

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...

answered Apr 08 '12 at 13:43

Niet the Dark Absol

320,036
81
464
592

Yeah thanks good idea. i'll try this but i don't have 19" screens right now. Thank you very much. – Hüseyin Z. Apr 08 '12 at 13:54

score 0 · Answer 3 · edited Jan 29 '13 at 18:27

0

The solution has 2 steps:

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

Editing font size also makes website look bigger and smaller.

edited Jan 29 '13 at 18:27

KatieK

13,586
17
76
90

answered Dec 29 '12 at 11:14

anilbey

1,817
4
22
38

Programmatically zoom out web page

3 Answers3

Linked