54

How to increase browser zoom level on page load?

here is my web link recently i got the task to increase its width just like if Firefox we press Ctrl + and browser zoom level is increases is there any way to do this automatically in all browsers on page load.

Danish Iqbal
  • 1,424
  • 1
  • 13
  • 24
  • Note:I already googled about this not find this or something which solve this problem – Danish Iqbal Feb 25 '12 at 05:31
  • 2
    If you **always** want the site to be bigger, why not style it to be bigger? – Tim M. Feb 25 '12 at 05:33
  • @TimMedora thanks for replying actually its required a more time to increase the size of all things and i think if i just increase zoom level so its better to add the code in pages – Danish Iqbal Feb 25 '12 at 05:37
  • As a decade veteran of web development, never thought I'd want to zoom - as it encroaches on the user's realm of control. However, for my intranet app, multiple users have their various resolutions set to work in accordance with their varying eyesight. My site scales just fine, but in some cases, is so much larger that it needs to be independently scaled back in comparison with other sites they visit. I may provide a setting they can save (persist in our db) that zooms down the site so they don't have to mess with their magnification/text size controls repeatedly every time they go to my app. – bkwdesign Mar 10 '14 at 16:30

4 Answers4

62

Personally I think this is a bad idea; either design your site so it scales easily (not hard with proper CSS/HTML techniques). Typically you should not make UX decisions for people.

But it is possible.

Demo: http://jsfiddle.net/q6kebgbh/4/

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
}

Note that previous versions of this answer used transform to support more browsers. However, this shortened code appears to work for current versions of Chrome, FF, Safari and IE (as well as previous versions of IE, which have supported zoom for a long time).

ICW
  • 3,540
  • 4
  • 20
  • 28
Tim M.
  • 52,666
  • 12
  • 118
  • 157
  • Thank you so much its working its working fine in Firefox,Chrome but not working in old internet explorer any suggestion well i am also downloading ie8 – Danish Iqbal Feb 25 '12 at 05:58
  • 1
    @DanishIqbal - you will need to use two different methods to support older versions of IE. I've updated my sample to show support for all browsers. – Tim M. Feb 25 '12 at 06:10
  • its hide all flash in this site – Danish Iqbal Feb 25 '12 at 09:58
  • Here is a shorter solution? (Without all those `-nnn-transform` properties) http://stackoverflow.com/a/12603229/694469 It uses `zoom` for all browsers except for Firefox, and supposedly works in Firefox, IE8+ and Chrome. – KajMagnus Mar 06 '13 at 05:22
  • 10
    NOTE: This is NOT actually the browser zoom. The browser zoom is still set to 100% using this technique. – cronoklee Jul 03 '15 at 10:51
  • 1
    Yes, agree with @cronoklee. The problem with this is that dimensions will be reported as 100% and when it is visually displayed as 200%, there could be a problem. The viewport is still 100%. When displaying a video for example, a part is below viewport and user can't press the stop button. Using the browser zoom instead, it works perfectly. – Codebeat Nov 02 '15 at 15:19
  • 1
    @Erwinus - yes, note that this answer is 3.5 years old and I thought it was a bad idea even then. I believe all modern browsers now support native zoom, so there is no good reason to use this approach for the overall page. Zooming a particular element still has its uses (e.g. animating the element size on mouseover). – Tim M. Nov 02 '15 at 16:09
  • not working for all iframes that are added by 3rd parties – Lukas Liesis Apr 15 '16 at 12:50
  • Why is this a bad idea? It's a lot more helpful to say why something is bad versus just saying it is bad. All of front end dev is literally making UX decisions for people. Developers create the UX, users do not. – ICW Nov 02 '21 at 21:38
  • @ICW A better way to phrase it may be, "developers shouldn't limit legitimate, expected options available to a user." Classic example: disabling the back button because a form can't handle navigation, rather than actually fixing the form. Zooming an element might make sense in limited cases (e.g. a hover effect) but it shouldn't be the first tool used for building a responsive design. I can imagine (especially 9 1/2 years ago when I wrote this) someone trying to "fix" a site for a phone by zooming it in/out to fit. – Tim M. Nov 02 '21 at 21:57
  • Since the code I showed doesn't actually change the zoom level of modern browsers, it doesn't interfere with that expected user ability, so that's a good thing. But it would still be possible to interfere with a user's intentions using a little JavaScript, e.g. "my page doesn't look good zoomed in, so I'll detect layout changes and diminish the zoom property so that it looks the way I want." – Tim M. Nov 02 '21 at 22:01
  • This wont change the viewport zoom. Is there anyway to make the viewport to 80% zoom? – Arj 1411 Nov 19 '21 at 06:51
19

Try this:

<script type="text/javascript">
        function zoom() {
            document.body.style.zoom = "300%" 
        }
</script>

<body onload="zoom()">
<h6>content</h6>
</body>
Vinod
  • 4,232
  • 4
  • 18
  • 26
8

You can try the CSS zoom rule. I've never really tried it, but in theory setting a css rule like the following might do what you want:

body { zoom: 2; }

Note: this doesn't actually modify the browsers zoom level. It just makes everything on the page bigger :)

jeremysawesome
  • 6,735
  • 4
  • 33
  • 37
  • @jaremysawesome thank you so mush its working in Chrome,Internet Explorer but not in Firefox any suggestion – Danish Iqbal Feb 25 '12 at 05:53
  • @DanishIqbal This works with FF: http://stackoverflow.com/a/12603229/694469 It uses `-moz-transform: scale(2)`. – KajMagnus Mar 06 '13 at 05:23
  • '-moz-transform zoom' is not the same as 'zoom'. the first one breaks my complex website layout which contains fixed and absolutely positioned elements.https://www.word-party.com/ – Kirill Reznikov Mar 01 '18 at 13:36
1

I have PWA which has a minimalistic design with a lot of whitespace and intended for mobile phones in the first place (so initially I didn't think about big screens).

So when you open it on a very big screen (tv or large monitor) it looks really ugly (because it is too much whitespace at that point). And as a user, I need every time zoom it in. My webapp is more aesthetically pleasing as well as easier to use from a sofa on tv when it is scalled up a bit on that large screen.

So in @media I change zoom property if a display is too wide. The problem is that -moz-transform: scale is absolutely different from zoom.

Bottom line if you want to zoom website with css you have three options:

  • (recommended, harder for existing page) To use em and rem units while developing your page. That will allow changing "zoom" of the page as easy as changing font size on body.

  • (easier for existing page) To use "transform: scale" for cross-browser experience, but it may work not as you expected.

  • (not-recommended, easy for existing page) To use CSS "zoom" property despite the fact that it is not a standard property. Sacrifices Firefox. Also, have some minor unexpected behavior with absolutely positioned flexboxes.

ToolmakerSteve
  • 11,473
  • 10
  • 75
  • 168
Kirill Reznikov
  • 2,177
  • 3
  • 15
  • 26