0

I'm looking to create a web page that is exactly the size of the view port when the browser window is maximized. In order to accomplish this, I want to create a container div for the entire application with a fixed width/height the size of the maximized window view port. If all users were to open this web page with maximized windows (and 100% zoom) this would be fairly easy by using

document.documentElement.clientWidth
document.documentElement.clientHeight

or just setting the css rule to:

#container{
    width: 100% //or 100vw;
    height: 100% ///or 100vh;

But these only give you the dimensions of the current view port. So getting the maximized view port requires a small workaround.

Getting the width is doable by subtracting the scrollbar width from the available screen width:

getContainerWidth(){
  let verticalScrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
  let containerWidth = screen.availWidth - verticalScrollBarWidth;
  return containerWidth}

Getting the height is slightly more complicated because we need to take into account the browser UI (tabs/address bar/bookmarks):

getContainerHeight(){
    let borwserUIHeight = window.outerHeight - window.innerHeight;
    let horizontalScrollBarHeight = window.innerHeight - document.documentElement.clientHeight;
    let containerHeight = screen.availHeight - (borwserUIHeight + horizontalScrollBarHeight);
    return containerHeight}

So far this seems to work until ... the user loads the page with dev tools open.

When this happens, none of the height measuring functions seem to account for the dev tools height.

  • window.innerHeight / $(window).outerHeight() - Height of view port including scrollbar (not including dev tools)

  • document.documentElement.clientHeight / $(window).height() / $(window).innerHeight() - Height of view port not including scrollbar (not including dev tools)

  • window.outerHeight - Height of browser window

  • document.documentElement.scrollHeight / $(document).height() - Seems to be the height of all the scrollable content, but in order for this to equal the required view port height there needs to all ready be some content in the page the size of the required height - which is the problem to begin with.

Is it possible to get the dev tools height? If not, is my approach to this way off and is there a better solution to what I require - A web page with fixed dimensions the size of the maximized view port that is not responsive to window size changes?

p.s

The only situation in which the container should respond to window size change is when switching screens, but that just requires re-assessing the required size with new constants.

rksilvergreen
  • 95
  • 2
  • 9
  • can you not just use https://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript? – Pete Jan 28 '19 at 11:03
  • https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight ..? – Teemu Jan 28 '19 at 11:05
  • @Pete screen.availHeight just gives the screen height minus OS taskbar. – rksilvergreen Jan 28 '19 at 12:08
  • @Teemu window.outerHeight simply gives the window height including tabs/address bar/bookmarks – rksilvergreen Jan 28 '19 at 12:08
  • The devtools are as much related to the viewport as those other mentioned parts of browsers. – Teemu Jan 28 '19 at 14:14
  • You should not assume that everybody puts the Dev Tools at the bottom of their window. My team, for example, generally docks Dev Tools on the right because we have far more extra horizontal space than vertical. So really the OP should've been asking about both width and height. – JackLThornton Nov 07 '22 at 14:45

0 Answers0