Chrome and Firefox Browser Default Zoom

Is there any capabilities to set Firefox browser zoom level to some specific percent throughout script execution?

FirefoxProfile profile= new FirefoxProfile();
profile.setPreference( "layout.css.devPixelsPerPx", "0.9" );
WebDriver driver = new FirefoxDriver(profile);

The above will set the firefox profile preference and simulate a zoom level of 90% for 110% set it to 1.1

Chrome and Firefox handle zoom differently. How to deal with this in my CSS

adding white-space:nowrap; to #menu keeps all menu items in one line during zoom, which means that my site now looks ok. However, chrome and firefox still behave differently under zoom, but i guess that's just something that developers have to allow for.

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. [↑ broken link. Archived copy → here].

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 that screen.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 by window.devicePixelRatio.
• Old WebKit? (unverified): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (from this answer)
• Opera: document.documentElement.offsetWidth / width of a position: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>

How to set zoom on a element using Javascript on Firefox?

zoom is not supported by FireFox.

Solutions below should work as you expect, only adjust numbers for your needs:

document.getElementById("pane-side").style.transform = "scale(0.5)";
document.getElementById("pane-side").style.transformOrigin = "left top";
document.getElementById("pane-side").style.width = "795px";
document.getElementById("pane-side").style.minHeight = "1700px";
document.getElementById("pane-side").style.alignSelf = "flex-start";

Or CSS version:

#pane-side {
    transform: scale(0.5);
    transform-origin: left top;
    width: 795px;
    min-height: 1700px;
    align-self: flex-start;
}

Or eventually <style> element added with JS:

var style = document.createElement('style');
style.innerHTML = `
    #pane-side {
        transform: scale(0.5);
        transform-origin: left top;
        width: 795px;
        min-height: 1700px;
        align-self: flex-start;
    }
`;
document.head.appendChild(style);

---

Related Topics