How to Increase browser zoom level on page load?
JavascriptCssHtmlJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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).
Solution 2 - Javascript
Try this:
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "300%"
}
</script>
<body onload="zoom()">
<h6>content</h6>
</body>
Solution 3 - Javascript
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 :)
Solution 4 - Javascript
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.