Changing the browser zoom level

change browser zoom level javascript
set browser zoom level css
how to set browser zoom level to 100 using javascript
how do i permanently zoom in chrome
browser zoom css
html zoom page
javascript zoom page
how to handle browser zoom in css

I have need to create 2 buttons on my site that would change the browser zoom level (+) (-). I'm requesting browser zoom and not css zoom because of image size and layout issues.

Well, is this even possible? I've heard conflicting reports.

I would say not possible in most browsers, at least not without some additional plugins. And in any case I would try to avoid relying on the browser's zoom as the implementations vary (some browsers only zoom the fonts, others zoom the images, too etc). Unless you don't care much about user experience.

If you need a more reliable zoom, then consider zooming the page fonts and images with JavaScript and CSS, or possibly on the server side. The image and layout scaling issues could be addressed this way. Of course, this requires a bit more work.

Changing the browser zoom level, On the Settings page, click the Show advanced settings… 1. Press Windows Key + R combination, type put Regedt32.exe in Run dialog box 2. Navigate to the following location: 3. In the right pane of this location, you’ll see the ZoomFactor named DWORD having 4. In the above shown box, firstly select the Decimal base.

Try if this works for you. This works on FF, IE8+ and chrome. The else part applies for non-firefox browsers. Though this gives you a zoom effect, it does not actually modify the zoom value at browser level.

    var currFFZoom = 1;
    var currIEZoom = 100;

    $('#plusBtn').on('click',function(){
        if ($.browser.mozilla){
            var step = 0.02;
            currFFZoom += step; 
            $('body').css('MozTransform','scale(' + currFFZoom + ')');
        } else {
            var step = 2;
            currIEZoom += step;
            $('body').css('zoom', ' ' + currIEZoom + '%');
        }
    });

    $('#minusBtn').on('click',function(){
        if ($.browser.mozilla){
            var step = 0.02;
            currFFZoom -= step;                 
            $('body').css('MozTransform','scale(' + currFFZoom + ')');

        } else {
            var step = 2;
            currIEZoom -= step;
            $('body').css('zoom', ' ' + currIEZoom + '%');
        }
    });

Changing the Zoom Level of your Browser – AppMachine Help Center, I would say not possible in most browsers, at least not without some additional plugins. And in any case I would try to avoid relying on the browser's zoom as the​  In Internet Explorer, on the View menu, point to Zoom, and then select a different level. If you have a mouse with a wheel, hold down the CTRL key, and then scroll the wheel to zoom in or out. If you click the Change Zoom Level button , it cycles through 100%, 125%, and 150%.

Possible in IE and chrome although it does not work in firefox:

<script>
   function toggleZoomScreen() {
       document.body.style.zoom = "80%";
   } 
</script>

<img src="example.jpg" alt="example" onclick="toggleZoomScreen()">

Best Practices for Browser Zoom, 2. Keyboard shortcuts: You can also use the zoom controls without a mouse. Press and hold command while pressing + to zoom in, - to zoom out,  Use the zoom options to make everything on a webpage larger or smaller. On your computer, open Chrome. At the top right, click More. Next to "Zoom," choose the zoom options you want:

You can use the CSS3 zoom function, but I have not tested it yet with jQuery. Will try now and let you know. UPDATE: tested it, works but it's fun

Font size and zoom, NOTE: Pressing Ctrl + 0 or Command + 0 will reset the zoom level on the current page, but may not change the default zoom setting for the browser. Use the  If the web site can alter the browser zoom level, that breaks the most basic accessibility feature that browsers have. I would consider any method of allowing a web site to change the browser zoom to be a serious bug, because any use of that feature would be abuse. – user57368 Jun 28 '09 at 17:53

as the the accepted answer mentioned, you can enlarge the fontSize css attribute of the element in DOM one by one, the following code for your reference.

 <script>
    var factor = 1.2;
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
        var style = window.getComputedStyle(all[i]);
        var fontSize = style.getPropertyValue('font-size');

        if(fontSize){
            all[i].style.fontSize=(parseFloat(fontSize)*factor)+"px";
        }
        if(all[i].nodeName === "IMG"){
            var width=style.getPropertyValue('width');
            var height=style.getPropertyValue('height');
            all[i].style.height = (parseFloat(height)*factor)+"px";
            all[i].style.width = (parseFloat(width)*factor)+"px";
        }
    }
</script>

Best Way to Programmatically Zoom a Web Application, This makes the controls only change the size of text; not images. Set a default zoom level for all websites. To adjust the default magnification level so all pages open at a specific zoom level, click the three horizontal lines in the upper right corner of Chrome, and select the settings option. On the Settings page, click the Show advanced settings… link at the bottom of the page. This will display some additional settings for you to adjust.

Can JavaScript Detect the Browser's Zoom Level?, The W3C recommendation provides 3 level of conformance: A , AA and AAA . The first word which comes up when we talk about size changing is zoom. To find inspiration, let's see how the native browser zoom feature  Changing the Zoom Level of your Browser 1. Using the Chrome menu button. 2. Keyboard shortcuts: You can also use the zoom controls without a mouse. Press and hold command while pressing + to zoom in, - to zoom out, or 0 to reset.

How to Set a Default Zoom Level in Firefox, My first guess was that this was intentionally not exposed in browsers because I don't know what the "change zoom" event would be window.

How to Change Chrome's Default Zoom Settings, If you browse with Mozilla Firefox, you can now set a default zoom level for all websites. And you can still set custom zoom levels for individual 

Comments
  • Browser zoom is something that should only be controlled by the user - never the web site. If the web site can alter the browser zoom level, that breaks the most basic accessibility feature that browsers have. I would consider any method of allowing a web site to change the browser zoom to be a serious bug, because any use of that feature would be abuse.
  • @unknown (google), nonsense. You're just very wrong. Such controls are invaluable for creating rich web applications in javascript that can measure up to flash, and secondly browsers can limit the zoom controls to be available only with user interaction and not give full control.
  • I really get tired of the whole "you should never XYZ". Yeah, that's all well and good in a perfect world, or when you're writing a brand-new site. But if the site is a decade old, the client won't pay for a new design, and your bosses expect you to make a site work on a tablet, that sort of "you really shouldn't" mentality can take a serious back-seat. If you know how to do something, say so. If you don't, then don't comment. Coming on to forums spouting off pedantic nonsense is unhelpful, and actually quite rude.
  • old post but there is a difference between "you should never" and "browser should not allow". It is precisely because web dev are pushing the limits, that browser devs have to put limits in place, for the good of the users. Otherwise we'd still be in a web of customised colorful scrollbars and shake-the-window onload.
  • Old revive but hot damn thank you @NathanCrause! I am coming to the point where I need to release Accessibility functionality as some users can't see as well, and not being able to change the browser zoom is making my life hard. CSS Zoom just doesn't work well with jquery ui
  • you must have jquery 1.8.3 or jquery migrate plugin (to use $.browser)
  • This is CSS zooming
  • For consistency, in MozTransform case, set the origin:
  • You should nowadays just be able to set transform: scale(..) in all browsers. MozTransform doesn't exist even in current versions of Firefox.
  • Jourkey explicitly asked for non CSS zoom.
  • This is just changing the CSS zoom value inline on body, which does exactly the opposite of what the question asked.
  • Don't forget that this zoom state likely needs to be persistently saved and managed in a session variable and replayed each page load.
  • yeah, totally not. Any idea for cross-browser? UPDATE: no need, just checked the post above! cheers