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.
Related
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
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 am trying to solve the problem of using Javascript to determine the width of my browser's "window". I'm aware different people can mean different things in this context so to be specific I mean the area in green as in this post.
I've read the first two replies to that post and a number of other stackoverflow solutions to this problem, none of which I could get to work: I am using Firefox 27.0.1 with the window maximised on a monitor that is 1920 pixels wide. The scripts says my viewport is 1536 pixels wide. I expected 1920 (or something close).
Based on what I have seen, it seemed to me the simplest solution in my case was this code:
<html>
<head>
<script type="text/javascript">
function onAfterLoad() {
document.write('<p>Your viewport width is '+window.innerWidth+'</p>');
}
</script>
</head>
<body onload="onAfterLoad();">
</body>
</html>
At the time of writing this code is here. This also says my viewport is 1536 pixels wide when I think it should be 1920.
Where am I going wrong please?
For me this problem is a result of browser zooming.
Try control+scroll wheel to see if this changes the results your are getting.
If so see How to detect page zoom level in all modern browsers?
Check your viewport meta tag. It should be:
<meta name="viewport" content="width=device-width,initial-scale=1" />
I think you should try with jQuery Dimension Functions. Rather dealing with Javascript functions.
Most basics are
$(window).width() (to get the width of browser)
and
$(window).height() (to get the height of browser)
Hope this helps.
Firstly:
Are you sure that's your viewport width?
Do you want to get the width of the browser window or the whole screen?
If you want to get the width of the whole screen that's impossible in JavaScript.
Secondly:
Try this to get the width of the browser window:
function GetWidth()
{
var width = document.body.clientWidth;
document.write('<p>Your viewport width is '+width+'</p>')
}
If you configure for example Microsoft Windows 7 to display text 25% bigger, then Firefox reports your screen to be 1/1.25 times it's actual size. Which is exactly 1536 for actual 1920.
(Even rectangles in a canvas are drawn 25% too big then. Been there, gone mad.)
Solution for windows 11 machines
Go to Settings > Display > Scale & Layout, and change it to 100%,
Afterwards you should see the screen resolution as your code output,
Note: this is not recommended because you will experience difficult text size to read.
Explanation
Some systems like windows scale the app viewport, this is because of screen nowdays have denser pixels per inch value, so text will be small.
To get a deeper understanding, imagine a typical laptop screen width 14 inch that has a 1920 pixels on width.
if you set the font to be 20px, then your text will have the following size:
text-size-in-inch = font-size-in-pixel * screen-width-in-inch / screen-pixels.
So if you do the math it will be :
text-size-in-inch = 20 * 14 / 1920 = .1458333... inch.
So it's really very small, thus systems tends to scale these screens by 125%, which is, in your case, your screen width will be = 1920 / 125% = 1536 px
Recommendation
You should adapt your code to work with any screen resolution
You code works well for me. It says 1600 (I've got a 1600 x 900 screen).
Is your browser maximised when you call the code?
Maybe your resolution is 1536 x something and you've got your screen stretched? I'd check it out in your screen settings. Another way to try it is to open Chrome and the Devtools and then resize the browser. It will show you the browser window dimensions.
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.
How do I find out the coordinates of the web page / document that is currently visible on my browser? For example, $(window).height() returns 700 and $(document).height() returns 3,000 i.e. my document is longer than the browser's height. I'd like to find out, after interacting with the page (e.g. scrolling), which area of my document is currently visible.
Thanks!
If you use jQuery you could do:
$(document).scrollTop();
http://api.jquery.com/scrollTop/
You could use
window.innerHeight
Height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.
window.innerWidth
Width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar.