What I want:
I am trying to figure out the effective viewport size of my webpage across devices - so the size available to content on the screen, without status bars and other stuff.
What I tried:
screen.availWidth/screen.availHeight- seems this actually grabs the browser window size or something. In any case, the status bar and other things are in this.jQuery's
$(document).width()/$(document).height()- obviously not working, because it gives the size of the entire document, I just want the viewport.jQuery's
$(window).width()/$(window).height()- UI seems also be included in this. Also, this sometimes gives really weird results on iOS when in landscape mode (on my iPad 2 width and height both return 1024 - weird!)window.outerWidth/window.outerHeight- seems to be the same as the$(window)counterpartswindow.innerWidth/window.innerHeight- this seems to be the way to go, but there is a major problem with this which I will describe now.
Why does window.innerX not work?
The big problem, at least on iOS 7, is: rubber banding. For example, if I determine the innerHeight while some rubber banding is currently going on, the value is too small - it seems that the rubber banding area (the gray area during rubber banding) is subtracted from innerHeight, which actually makes this completely useless for me, as I am trying to get this value during a touch event. I have found no way to prevent this (except disabling rubber banding) and no way to find the current rubber banding area size or something. offsetTop seems to be 0, so rubber banding is not in there.
Any ideas how to solve this issue? Any good way to get the actual viewport size in both portrait and landscape?
Update / Solution
I haven't found a solution for the rubberbanding issue with innerWidth/Height but it seems that jQuery's $(window).width()/height() usually gives the viewport size. The reason this didn't work properly for me was that I used height=device-height in the viewport meta tag. Omitting this, the returned values seem to be pretty much what I wanted.