Menu
Open the console in chrome (whilst on SO) and copy in innerWidth + "|"+outerWidth + "|" + screen.width, for me this will return 2133|1920|1920, apparantly the innerWidth is greater than the outerWidth... As if this isn't strange enough I next tried running this code in firefox and it returns 1920|1936|1920. Apparantly my outerWidth is greater than my screen size. (All screens were normally maximized). Strangely enough running the same code on a 'normal' page (not stackoverflow) will return 1920|1920|1920 in chrome, firefox however still insists my outerWidth is greater than my screen.
Have looked around on google, found a couple of articles regarding the functionality on mobile devices, but nothing seems to explain any of the above observation.
494
Value. An integer value indicating the width of the window's layout viewport in pixels. This property is read-only, and has no default value. To change the window's width, use one of the Window methods for resizing windows, such as resizeBy() or resizeTo() .
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.
The read-only Window property innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar, if one is present. More precisely, innerWidth returns the width of the window's layout viewport.
Place a tape measure horizontally between the inside jamb on the left and the right. Close the window and make a similar measurement from jamb to jamb near the middle of the window. Measure the distance between the jambs at the top of the window. Record the shortest measurement.
One reason innerWidth could be larger than outerWidth is if your browser is zoomed. I got the following results with the browser in fullscreen mode:
zoom inner outer
75% 1706 1280
90% 1422 1280
100% 1280 1280
110% 1164 1280
The only way I could get outerWidth to be larger than screen.width is by changing the window width by dragging.
97
There is a difference between getting of innerWidth and outerWidth. Look at official definitions:
Window.innerWidth: is Width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar.
Window.outerWidth: The outerWidth attribute must return the width of the client window.
As you can see innerWidth has bound to viewport width, while outerWidth has bound to browser window width.
Therefore outerWidth can be less than innerWidth when your page is just zoomed in, or page view is scaled up. I think you need to state folloving tag in your page:
<meta name="viewport" content="width=device-width, initial-scale=1">
It will make you page to behave as expected (fit to width limits of screen) in small viewports.
And as a possible cause of large innerWidth is the scripts or styles that can change window dimensions.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
