Changing the browser zoom level
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.
Set the browser min zoom level below 25%
There is no way to set the browser zoom level below 25% in most browsers, but there is a way to do much the same thing, as a developer. When you create an HTML canvas, you set the size of the canvas with the width and height attributes, canvas.width and canvas.height. The CSS properties, canvas.style.width and canvas.style.height, only set the size at which the canvas is displayed, not the size of the canvas itself.
How to Increase browser zoom level 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).
How to detect page zoom level in all modern browsers?
Now it's an even bigger mess than it was when this question was first asked. From reading all the responses and blog posts I could find, here's a summary. I also set up this page to test all these methods of measuring the zoom level.
Edit (2011-12-12): I've added a project that can be cloned: https://github.com/tombigel/detect-zoom
- IE8:
screen.deviceXDPI / screen.logicalXDPI
(or, for the zoom level relative to default zoom,screen.systemXDPI / screen.logicalXDPI
) - IE7:
var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;
(thanks to this example or this answer) - FF3.5 ONLY:
screen.width
/ media query screen width (see below) (takes advantage of the fact thatscreen.width
uses device pixels but MQ width uses CSS pixels--thanks to Quirksmode widths) - FF3.6: no known method
- FF4+: media queries binary search (see below)
- WebKit: https://www.chromestatus.com/feature/5737866978131968 (thanks to Teo in the comments)
- WebKit: measure the preferred size of a div with
-webkit-text-size-adjust:none
. - WebKit: (broken since r72591)
document.width / jQuery(document).width()
(thanks to Dirk van Oosterbosch above). To get ratio in terms of device pixels (instead of relative to default zoom), multiply bywindow.devicePixelRatio
. - Old WebKit? (unverified):
parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth
(from this answer) - Opera:
document.documentElement.offsetWidth
/ width of aposition:fixed; width:100%
div. from here (Quirksmode's widths table says it's a bug; innerWidth should be CSS px). We use the position:fixed element to get the width of the viewport including the space where the scrollbars are; document.documentElement.clientWidth excludes this width. This is broken since sometime in 2011; I know no way to get the zoom level in Opera anymore. - Other: Flash solution from Sebastian
- Unreliable: listen to mouse events and measure change in screenX / change in clientX
Here's a binary search for Firefox 4, since I don't know of any variable where it is exposed:
<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
var style = document.getElementById('binarysearch');
var dummyElement = document.getElementById('dummyElement');
style.sheet.insertRule('@media (' + property + ':' + r +
') {#dummyElement ' +
'{text-decoration: underline} }', 0);
var matched = getComputedStyle(dummyElement, null).textDecoration
== 'underline';
style.sheet.deleteRule(0);
return matched;
};
var mediaQueryBinarySearch = function(
property, unit, a, b, maxIter, epsilon) {
var mid = (a + b)/2;
if (maxIter == 0 || b - a < epsilon) return mid;
if (mediaQueryMatches(property, mid + unit)) {
return mediaQueryBinarySearch(
property, unit, mid, b, maxIter-1, epsilon);
} else {
return mediaQueryBinarySearch(
property, unit, a, mid, maxIter-1, epsilon);
}
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
'min-device-width', 'px', 0, 6000, 25, .0001);
</script>
Force page zoom at 100% with JS
You can set zoom
property on page load
document.body.style.zoom = 1.0
But, zoom
is not a standard property for all browsers, I recommend using transform
instead.
var scale = 'scale(1)';
document.body.style.webkitTransform = scale; // Chrome, Opera, Safari
document.body.style.msTransform = scale; // IE 9
document.body.style.transform = scale; // General
http://jsfiddle.net/5RzJ8/
Related Topics
Regex to Allow Only Certain Special Characters and Restrict Underscore
How to Make a Bot Delete Messages After a Certain Time Period
Regular Expression to Get a String Between Two Strings in JavaScript
Javascript: Location.Href to Open in New Window/Tab
How to Have Multiple Buttons of Same Id Value and When Click on Any Button the Pop-Up Should Come
How to Convert Raw Mp3 Binary into Blob Url and Play It in Audio Tag
How to Create Expand/Collapse Function for Each Row of Table - Angular6
What's the Best Way to Reload/Refresh an Iframe
How to Use Aria-Expanded="True" to Change a CSS Property
How to Pass the Checked and Unchecked Value of Checkboxes in Component.Ts File in Angular
Customizing Item-Text in V-Select
How to Separate String and Push to React State
Javascript Regex - No White Space At Beginning + Allow Space in the Middle
Force Browser to Download Image Files on Click
Filter Array of Dates Between Two Dates
How to Trigger an Onchange Event Manually
Uncaught Typeerror: Cannot Read Property 'Click' of Null Chrome Extension
How to Find Previous or Next Element from Array in JavaScript