What causes variations in the values returned by outerWidth on different websites?

Curiously, I have noticed that window.outerWidth returns a larger value at Stackoverflow.com compared to other websites in my browser. This behavior seems to be unique to Firefox and Stackoverflow. But shouldn't it be consistent across all websites?

According to MDN Web Docs:

The Window.outerWidth read-only property represents the width of the entire browser window including sidebars (if expanded), window chrome, and resizing borders/handles.

Example of outerWidth values when in fullscreen:

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

As of now, I have not encountered any other website with a similar discrepancy in outerWidth.

console.log( window.outerWidth )

Steps to reproduce this behavior:

  1. Visit stackoverflow.com
  2. Open Developer Tools / Console
  3. Type window.outerWitdh
  4. Visit google.com or another site
  5. Type window.outerWitdh in the console

In Firefox 95 on Ubuntu 18.04 LTS, these two values differ, with Stackoverflow showing a larger value.

javascript

Answer №1

  • Your current zoom level on StackOverflow.com is set to 90%.

    • If your desktop's browser window width is actually 2070px, then with a 90% zoom level it would be equivalent to 1863px (2070 * 0.9 == 1863).

  • Firefox adjusts all measurements when you change the zoom level, making the page unaware of the zooming effect.

  • To ensure accurate numbers, reset Firefox tabs' zoom levels to 100%.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a new design of a Three.js element

After reviewing this particular example involving three.js for drawing particles with images, I found it to work flawlessly. However, I am interested in replacing the image by toggling it with a switch upon clicking a button. Here is the function for this ...

javascriptthree.jsfrontend

Exploring the contrasting outcomes between a request post and an axios post

After using request and wrapping it with a promise, I realized that I could write cleaner code by switching to axios. However, I encountered an internal server error (Request failed with status code 401) and since I don't have access to the backend co ...

javascriptnode.jsexpressaxios

Prevent draggable canvas elements from overlapping using jQuery

I'm currently working on a project where I need to make three canvas elements draggable while preventing them from overlapping each other. After researching similar issues, I came across the "jquery-ui-draggable-collision" library. Here is the code I ...

javascriptjquerycanvasjquery-ui-draggable

Trouble with HTTPS request in Android fragment

My app crashes and returns to the main activity whenever I try to use the search function with the Kitsu API in my fragment. I have observed through Logcat that no data is being fetched, but I am unable to determine what is causing the crash.The LogCat r ...

javascriptjavaandroidjson

Retrieve vue instance/data from within a filter method

I'm attempting to access the data of a Vue instance within a filter function as shown below. JS:- new Vue({ data:{ amount: 10, exchangeRate:50 }, el:"#app", filters:{ currency: function(amount){ console.log(this); ...

javascriptvue.jsvuejs2

Encountered an issue while attempting to import a package in ES6: 'Module specifier "vue" could not be resolved'

As I dive into Vue tutorials, I find myself facing a challenge in importing Vue into a .js file and then linking this file to my index.html. The script importation in my index.html looks like this: <script src="./js/main.js" type="module"></scrip ...

javascriptvue.js

Merge functions that execute identical operations

I find myself in a situation where I have two functions that do very similar tasks, but on different elements. Initially, I only anticipated having these two functions, but now I realize I'll need to add more. This will result in a lot of repetition. ...

javascriptjquery

Request failed: The ajax call did not trigger the error function or timeout

Displayed below is the Ajax call that I have created var configuration = { "asynchronous": true, "crossOrigin": true, "url": "http://sample.com/customer/api/v1/meetings/meeting", "methodType": "POST", "headers": { ...

javascriptphpjqueryajax

An error will occur if you try to use $.ajax inside a function

I am facing an issue with a function that utilizes jquery's ajax to check an API for the success status of a variable. The goal is to return true if the "success" variable is true and false if it is false. Below is the code snippet: function checkLo ...

javascriptjqueryhtmlajax

Integrating additional JavaScript into an Ionic 2 project

Imagine we have a foo.js file containing a variable, function, and class that are not yet part of the project. Now suppose we want to access these elements in our home.ts method or make them globally available for use within a home.ts method. How can this ...

javascriptangulartypescriptionic2faye

Optimizing SEO with asynchronous image loading

I've been developing a custom middleman gem that allows for asynchronous loading of images, similar to the effect seen on Medium. Everything is functioning smoothly, but I'm uncertain about the impact on SEO. The image tag in question looks like ...

javascripthtmlseo

Clearing up memory in ThreeJS application

I'm facing challenges with memory management in my ThreeJS application. I know there are already a few queries regarding this issue: freeing memory in three.js Freeing memory with threejs Three.js Collada - What's the proper way to dispose() a ...

javascriptmemorythree.js

Discovering the process of iterating through values from multiple arrays of objects and applying them to a new response in Angular 8

Received the following data from an API response: const apiResponse = { "factoryId": "A_0421", "loss": [ { "lossType": "Planned Stoppage Time", "duration": ...

javascriptangulartypescriptangular8

Update the value of input within a Struts2 iterator by utilizing JavaScript

As a junior programmer, I am trying to update the value of an input type text within a Struts2 iterator without refreshing the entire page. I believe using JSON could be a solution for this issue. Here is my JSP code: <input type="text" name="cantidad ...

javascriptjavajsonjspstruts2

Cross-component communication in Angular

I'm currently developing a web-based application using angular version 6. Within my application, there is a component that contains another component as its child. In the parent component, there is a specific function that I would like to invoke when ...

javascriptangulartypescriptcomponents

Tips for displaying tab content with CSS Grid areas

I have successfully implemented a tabbed interface using CSS Grid areas. However, I am encountering an issue where the tab content is not displaying and the console shows a value of null. Below is the code snippet that I am currently working with: funct ...

javascriptcssgrid

Issues Loading Ajax Content on iPad2 While Using JQuery UI Tabs

After loading content.php into my browser, I encountered an issue with the tab/JavaScript interaction on Apple devices such as iPad's and iPhone's. The tabs were set up to load via Ajax, but for some reason, the JavaScript inside clients.php was ...

javascriptjqueryipadtabs

Having trouble bringing in icons from the @mui/icons-material library

An error occurs when attempting to run the code. wait - compiling... error - ../../../../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js:1:0 Module not found: Can't resolve '@mui/material/utils' null Note: @mui/material pack ...

javascriptcssreactjsmaterial-uinext.js

Encode JavaScript Array to URL - converting an array into an object

I have an array structured like this: { search: "job", keywords: "", cat: [12,28,38] } and I am seeking a URL string in this format: ?search=job&keywords=&cat%5B%5D=12&cat%5B%5D=28&cat%5B%5D=38 to use for my query in WordPress. Pleas ...

javascriptjqueryarraysurlencodeurldecode

Retrieving information from a GET request/JSON payload

It's been a while since I last worked with JavaScript and I'm struggling to figure out how to extract data from a JSON object. Currently, I am making a simple GET request to the Giphy API in order to retrieve URLs from the response, but for some ...

javascriptjqueryjson