35

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?

Improve this question
1
  • 2
    Sounds like there are CSS issues why don't you consider a proper html and css instead of zooming?
    – Vinay
    Commented Mar 12, 2014 at 7:09

3 Answers 3

Reset to default
52

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.

Improve this answer
6
  • 7
    The CSS zoom property only works on old versions of Internet Exploder!
    – nikitz
    Commented Mar 12, 2014 at 8:10
  • 1
    That is exactly why I've provided a second solution too.
    – user1733583
    Commented Mar 12, 2014 at 8:22
  • 3
    html {zoom: 160%;} works and using Ctrl+0 sets zoom to 160%
    – noobninja
    Commented Dec 26, 2016 at 13:27
  • This makes Google Maps break on all browsers, but Firefox.
    – user5147563
    Commented Jun 30, 2017 at 14:47
  • 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
    Commented Sep 4, 2021 at 16:53
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?

Improve this answer
1
  • -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
    Commented Oct 25, 2018 at 9:35
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?

Improve this answer
1
  • 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
    Commented Nov 21, 2020 at 7:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.