How to Increase browser zoom level on page load?

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.


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


Try this:

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

<body onload="zoom()">
<h6>content</h6>
</body>

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 :)