is there a way I can capture the view port width of a maximized browser window?
(the window obviously does not necessarily need to be maximized when reading in this value)
screen.width will kind of get you there
https://developer.mozilla.org/en-US/docs/Web/API/Screen/width
but this is not fully accurate, but depending on your needs it may be good enough
You can get the screen size, window.screen.availHeight && window.screen.availHeight but this will not be the same as the inner dimensions of a maximized browser window window.innerWidth && window.innerWidth.
Related
I'm working on a PWA which I have to resize dynamically, depending on different conditions. In one of the cases the width of the app should be 300px. Unfortunately, window.resizeTo(width, height) can't shrink the app window to less than 500px in width. The only way I found to get a web browser window with a smaller width is through first creating it with window.open(), but in my PWA case I already have that standalone window, so this doesn't help. Any other ideas? Thanks!
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.
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.
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.
If we take the MDN definition of window.outerWidth:
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.
And for window.innerWidth:
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.
Concluding:
The outerHeight and outerWidth take into account the browser window size and not the html visible size. Because of that, the values can change from browser to browser and device to device. Moreover, the values can be larger than the device screen itself.
The innerWidth value includes the scroll if present. This means the width value will not be only referring to the visible part but also the amount of scroll left which could be greater than window.outerWidth.
document/window outerHeight provides the size of the window (e.g when the browser windows is re-sized the value changes ).
screen.availHeight gives you the actual screen size (including the actual browser navigation etc)
I tried creating a fixed div set with top:0,buttom:0 and get the outerHeight but it's also restricted to the window's current size.
What is the best way to get the max available height when the window is maximized ?
Thanks.
EDIT
The answer, provided with the help of #Greg Burghardt is
screen.availHeight - (window.outerHeight - window.innerHeight)
You may be looking for:
document.documentElement.offset[Height|Width]
A good reference: A Tale of Two Viewports
In javascript, window.open() with width=500 height=500 open a new window with page size(the area in which the html is displayed) of 500 by 500. But the size of the whole window is larger (width and height in the picture, depends on theme,operating system etc...)
Our system needs to use window.open() in different environments (OS's, themes...). In each environment the window needs to open in max size so it covers the whole screen and only the taskbar is not covered.
In order to do so, I need to be able to find the size of the extra controls(all the aero glass and buttons ). If I had the width and height of whole window, I could substract from it the page size. Is there a way to get those values (height and width of the whole window) ?
if I understand good, you can find the extra space with:
window.outerHeight - window.innerHeight
You could use screen.height;andscreen.width; to get the full scrren resolutions or screen.availHeight to get the height of the visitor's screen, in pixels, minus interface features like the Windows Taskbar.
For information about window.height and sreen.height see the post from jigfox.
In my Web application , am in need to use the browser window's Height & Width. So I used Screen.Width , Screen.Height properties in JavaScript to get the Width & Height. While am surfing I got another property as Window.Width , Window.Height. Can anyone tell me , which property gives me the Size of Browser window.....Screen (or) Window ?
screen is actually window.screen since window is the context for globals.
A window object (obtained through document.defaultView) returns information about both the window and the viewport. To get the application window size use window.outerHeight, to get viewport size use window.innerHeight.
The screen object refers to the actual monitor window or desktop size. Note that if you have a multi-mon setup then you will have multiple screen objects. A window object belongs to a single screen, though not very window belongs to the same screen. I do not know what happens when a browser window spans multiple screens.
From all this, you can determine that if you are running a full-screen browser then window.outerHeight == window.innerHeight == screen.height.
Source: https://developer.mozilla.org/en-US/docs/DOM/window.screen and https://developer.mozilla.org/en-US/docs/DOM/window
window.screen.height
window.screen.width
height/width of the screen or monitor in pixels
window.screen.availHeight
window.screen.availWidth
height/width of the screen or monitor, in pixels, minus permanent or semi-permanent user interface features displayed by the operating system, such as the Taskbar on Windows or device status bar on smart phones
window.innerHeight
window.innerWidth
height/width of the content area of the browser window including, if rendered, the horizontal/vertical scrollbar
window.outerHeight
window.outerWidth
height/width of the outside of the browser window
What is the difference between window, screen, and document in Javascript? is pretty much this same question. To paraphrase the accepted answer and add some info that I feel it could use:
window in the root object. Any variables or functions you define are in some way children of the window object. So if you do var something="blah" in a script tag, you can later access that variable in 3 ways - something, window.something or window["something"].
screen is one of the children of window that is created by the browser. however, for the same reason that you can access window.something as something, you can access it either as window.screen or screen. This contains the properties of the actual screen, and it is where I would go to get the details you want (unless you have access to a framework like jQuery or Prototype, in which case they can probably give you this information without worries about browser compatibility).