Making HTML page zoom by default

Question

I've designed a page, where buttons look good when the browser zoom is at 90%, but by default other users view it at 100/125%+ in their browser which is resulting an overlap in buttons and input forms.

So, I want to set the zoom value as 90% by default when my JSP page loads.

How do I do this? After making any such setting can make the page non-zoomable? Or Is there any better solution for this?

Sounds like there are CSS issues why don't you consider a proper html and css instead of zooming? — Vinay, Mar 12 '14 at 07:09

score 48 · Accepted Answer · 2014-03-12T08:23:32.020

48

Solved it as follows,

in CSS

#my{
zoom: 100%;
}

Now, it loads in 100% zoom by default. Tested it by giving 290% zoom and it loaded by that zoom percentage on default, it's upto the user if he wants to change zoom.

Though this is not the best way to do it, there is another effective solution

Check the page code of stack over flow, even they have buttons and they use un ordered lists to solve this problem.

edited Mar 12 '14 at 08:23

answered Mar 12 '14 at 07:13

7

The CSS `zoom` property only works on old versions of Internet Exploder! – nikitz Mar 12 '14 at 08:10
1

That is exactly why I've provided a second solution too. – Mar 12 '14 at 08:22
2

`html {zoom: 160%;}` works and using Ctrl+0 sets zoom to 160% – noobninja Dec 26 '16 at 13:27
This makes Google Maps break on all browsers, but Firefox. – Jun 30 '17 at 14:47
i think you can also handle it with device-port – Al Ped May 28 '20 at 10:20
1

This is working in Brave but not in Firefox. In Brave, however, does not make the default zoom to change, instead the default zoom still is 100 % but it looks like another number. So the effect is practically the same. – user171780 Sep 04 '21 at 16:53

score 17 · Answer 2 · edited May 23 '17 at 12:10

17

In js you can change zoom by

document.body.style.zoom="90%"

But it doesn't work in FF http://caniuse.com/#search=zoom

For ff you can try

-moz-transform: scale(0.9);

And check next topic How can I zoom an HTML element in Firefox and Opera?

edited May 23 '17 at 12:10

Community

1
1

answered Mar 12 '14 at 07:07

Vasiliy vvscode Vanchuk

7,007
2
21
44

-moz-transform: scale(0.9); works in FF, but it is not possible to zoom the whole page with it. I tried `* {-moz-transform: scale(1.1);}` which is a mess, because the ratio between elements is not zoomed by this. – rubo77 Oct 25 '18 at 09:35

score 8 · Answer 3 · edited May 23 '17 at 10:30

8

A better solution is not to make your page dependable on zoom settings. If you set limits like the one you are proposing, you are limiting accessibility. If someone cannot read your text well, they just won't be able to change that. I would use proper CSS to make it look nice in any zoom.

If your really insist, take a look at this question on how to detect zoom level using JavaScript (nightmare!): How to detect page zoom level in all modern browsers?

edited May 23 '17 at 10:30

Community

1
1

answered Mar 12 '14 at 07:10

lucas.sa

89
2

My pages are embedded into a website, which is using smaller fonts and icons then my pages. So we also want to adjust the RELATIVE zoom level of my pages. Please note that the browser zoom level still applies. – cskwg Nov 21 '20 at 07:07

Making HTML page zoom by default

3 Answers3

Linked