Home > Net >  Why does outerWidth give different values for some websites?
Why does outerWidth give different values for some websites?

Time:12-22

I wonder why window.outerWidth gives me a bigger value at Stackoverflow.com than at other websites in my browser. I have just noticed this behaviour only on Firefox and Stackoverflow. Shouldn't it be the same on all websites?

In MDN Web Docs it says:

Window.outerWidth read-only property returns the width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.

Example outerWidth at fullscreen:

  • Stackoverflow: 2070
  • Discord.com and the others in my tabs: 1863

So far I haven't found any website that has a similar behaviour.

console.log( window.outerWidth )

steps to to reproduce it

  1. visit stackoverflow.com
  2. open Developertools / Console
  3. write window.outerWitdh
  4. visit google.com or other side
  5. write window.outerWitdh in the console

In Firefox 95 on Ubuntu 18.04 lts these two values are different. Stackoverflow has a larger value.

CodePudding user response:

  • You are running StackOverflow.com at 90% zoom.

    • Assuming that 2070px is your browser windows' actual width on your desktop, then if you multiply that by 0.9 (90%) then you get 1863px (2070 * 0.9 == 1863).
  • When you run Firefox at different zoom level, Firefox multiplies all other measurements of the page's environment (including the browser and viewport) so the page doesn't actually know it's being zoomed.

  • Reset your zoom level in all your Firefox tabs to 100% and then numbers will match.

  • Related