I tried to get browser window width with $(window).width();. On IE 10, it does return the full browser width, include the scroll bar. However, on Firefox and Chrome, both return the value without the scroll bar.
How can I get the browser width include with the scroll bar together? Because I need the detected width to be exactly same as CSS.
Thanks.
The first answer was close, but upon further inspection it is a bit more complicated. The body.clientWidth is the width excluding the scrollbars. The window.outerWidth is the width including the scrollbars and other window elements like the window border. The window.innerWidth is the actual width of the window, including scrollbars, but not including the window border.
This will get the full Window's width:
window.outerWidth
NOTE: jQuery's outerWidth() doesn’t work on $(window)
window.innerWidth seems to be the correct answer when needed for responsive design
window.innerWidth will give the width of the HTML and the scrollbar. This value is the value used for device width breakpoints when using media queries in CSS. Essentially, window.innerWidth is equal to the calculated CSS unit 100vw. However, window.outerWidth will give you the width of the entire window.
For example, if you had Chrome's Dev Tools open inside of the browser, window.outerWidth would be the width of the webpage + scroll bar + Chrome's Dev Tools inspector. While window.innerWidth would return the width of just the webpage + scroll bar.
Related
I'm creating a JavaScript canvas game. My logic include whether a sprite has went to the bottom of the browser window (as the canvas is 100% width & 100% height).
Thus, it can be quite confusing if the browsers' height keeps changing, as I'm not sure what's the intended behaviour if a sprite that has already go to the bottom is exposed by resizing the window to a larger height.
I think my options are:
refer the width & height of browser without resizing, OR
When client resize the browser mid game, there should be a "Please resize browser back to the initial size" and a button to do so (as resizing to a specific size can be quite hard)
I think option 2 isn't feasible as it is not supported by Chrome & Opera since its easy to abuse the resize functionality.
For number 1, I haven't find if there is any property that supports this. I tried:
console.log("width ", document.documentElement.clientWidth);
console.log("height ", document.documentElement.clientHeight);
window.onresize = function() {
console.log("width ", document.documentElement.clientWidth);
console.log("height ", document.documentElement.clientHeight);
}
I also tried document.innerWidth & innerHeight but it is
still not the true browser's width & height. It is the width & height after resizing OR width & height after reduced with chrome dev tool's width & height.
Is there any way I can accomplish this?
Thanks
in order to get the browser's screen height,
window.innerHeight in js and
$(window).height() in jquery is used.
i have a modal(popup) which i calculate and refresh it's position(i make it center aligned) when it's inner html is changed.
so first i need to compare the modal's new height to the browser screen's height before positioning.
Problem:
the problem i have is that when the browser's console is open, the code above doesn't give me the browsers screen height, i gives a much less number
browser height is less when console is opened
To find the entire height,
window.outerHeight
or
screen.availHeight
can be used. This will not consider the console size.
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.
I want to measure the height of the visible content area (that means - the top side of it is located where I start to see the site's content and that it ends where I have the windows or mac task panel) in Javascript somehow. It varies from browser to browser and whether I have other panels in the browser then it changes its size.
How can I get this data?
Here are a few useful Javascript (not jQuery) tools you can use to find this:
document.body.offsetWidth
document.body.offsetHeight
These find the Width and Height of the body element (so unless you've done something strange to the body element, then this should work).
You also have:
window.innerWidth
window.innerHeight
These would give you the width of the browser viewport, like antimatterfish said.
Do you mean $(window).height(); and $(window).width(); ? "window" measures the browser viewport...
I'm working on a Chromium extension that runs a context script on a constrained window, and want to increase the window height by one pixel (I need the page to reposition, since I'm injecting HTML into it).
I'm attempting to use the following code:
window.resizeTo(window.innerWidth, window.innerHeight + 1);
but this shrinks the window (I suspect because Chromium resizeTo sets window size, but innerWidth and innerHeight gets the size of the TabContents window pane (not including the top bar and border).
How can I either get the proper size or properly resize the window? Thanks for any advice.
You actually want window.outerHeight/window.outerWidth, which includes all of the browser UI.