Next.js Discord

Discord Forum

Get height and width of browser window

Answered
Chukar posted this in #help-forum
Open in Discord
Avatar
ChukarOP
I want to get the height and width of the browser window using window.innerWidth and window.innerHeight.
But in safari mobile browser, it gives the height and width including the search bar and top bar. How to get the height and width without these?
Answered by B33fb0n3
While doing this: https://nextjs-forum.com/post/1314504238566608927#message-1314507031532671016

yes, window.outerHeight gets the height in pixels of the whole browser window. So when you substract it you should get the height of the searchbar and with that you know how height the actual page is. If you just need that value for CSS you can use the unit vhd like 100vhd
View full answer

9 Replies

Avatar
ChukarOP
it also give the same height and width as of innerWidth and innerHeight
Avatar
@Chukar it also give the same height and width as of innerWidth and innerHeight
Avatar
B33fb0n3
can you try it via document.documentElement.clientHeight and document.documentElement.clientWidth?
Avatar
ChukarOP
it also give the same height and width as of innerWidth and innerHeight
Avatar
@Chukar it also give the same height and width as of innerWidth and innerHeight
Avatar
B33fb0n3
can you try it like this:
let maxHeight = Math.max(window.innerHeight || 0, window.outerHeight || 0);
let minHeight = Math.min(window.innerHeight || 0, window.outerHeight || 0);

(also the same for the width)
Avatar
ChukarOP
maxHeight and minHeight are different but width remains the same
Avatar
B33fb0n3
While doing this: https://nextjs-forum.com/post/1314504238566608927#message-1314507031532671016

yes, window.outerHeight gets the height in pixels of the whole browser window. So when you substract it you should get the height of the searchbar and with that you know how height the actual page is. If you just need that value for CSS you can use the unit vhd like 100vhd
Answer
Avatar
ChukarOP
thanks
Avatar
B33fb0n3
happy to help