Skip to content

Instantly share code, notes, and snippets.

@jalbertbowden
Created March 31, 2013 05:14
Show Gist options
  • Save jalbertbowden/5279627 to your computer and use it in GitHub Desktop.
Save jalbertbowden/5279627 to your computer and use it in GitHub Desktop.
// tests
// returns height of the screen including all toolbars
// requires detection of orientation. (320px for our test)
// window.orientation === 0 ? screen.height : screen.width
// returns height of the visible area
// it decreases if you zoom in
// window.innerHeight
// returns height of screen minus all toolbars
// problem is that it always subtracts it with height of the browser bar, no matter if it present or not
// fullscreen mode it always returns 320px.
// doesn't change when zoom level is changed.
// document.documentElement.clientHeight
// detect height
// caveat 01: windows.innerHeight always returns a rounded value causing pixel perfect inconsistencies on zoom
// caveat 02: returns incorrect value on zoom in near top bar.
var getIOSWindowHeight = function() {
// Get zoom level of mobile Safari
// Note, that such zoom detection might not work correctly in other browsers
// We use width, instead of height, because there are no vertical toolbars :)
var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
// window.innerHeight returns height of the visible area.
// We multiply it by zoom and get out real height.
return window.innerHeight * zoomLevel;
};
// You can also get height of the toolbars that are currently displayed
var getHeightOfIOSToolbars = function() {
var tH = (window.orientation === 0 ? screen.height : screen.width) - getIOSWindowHeight();
return tH > 1 ? tH : 0;
};
@avesus
Copy link

avesus commented Feb 1, 2018

In landscape orientation it gives wrong full height of the screen, not height of the visible area.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment