How to get the width and height of the viewport with vanilla JS

Yesterday, we looked at the Element.getBoundingClientRect() method, and how you can use it to get details about an element’s position in the viewport.

Today, let’s look at how to get the height and width of the viewport itself. This one i…


This content originally appeared on Go Make Things and was authored by Go Make Things

Yesterday, we looked at the Element.getBoundingClientRect() method, and how you can use it to get details about an element’s position in the viewport.

Today, let’s look at how to get the height and width of the viewport itself. This one is short-and-sweet.

You can use the window.innerHeight property to get the viewport height, and the window.innerWidth to get its width.

let viewportHeight = window.innerHeight;
let viewportWidth = window.innerWidth;

Here’s a demo.


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2021-04-09T14:30:00+00:00) How to get the width and height of the viewport with vanilla JS. Retrieved from https://www.scien.cx/2021/04/09/how-to-get-the-width-and-height-of-the-viewport-with-vanilla-js/

MLA
" » How to get the width and height of the viewport with vanilla JS." Go Make Things | Sciencx - Friday April 9, 2021, https://www.scien.cx/2021/04/09/how-to-get-the-width-and-height-of-the-viewport-with-vanilla-js/
HARVARD
Go Make Things | Sciencx Friday April 9, 2021 » How to get the width and height of the viewport with vanilla JS., viewed ,<https://www.scien.cx/2021/04/09/how-to-get-the-width-and-height-of-the-viewport-with-vanilla-js/>
VANCOUVER
Go Make Things | Sciencx - » How to get the width and height of the viewport with vanilla JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/09/how-to-get-the-width-and-height-of-the-viewport-with-vanilla-js/
CHICAGO
" » How to get the width and height of the viewport with vanilla JS." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2021/04/09/how-to-get-the-width-and-height-of-the-viewport-with-vanilla-js/
IEEE
" » How to get the width and height of the viewport with vanilla JS." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2021/04/09/how-to-get-the-width-and-height-of-the-viewport-with-vanilla-js/. [Accessed: ]
rf:citation
» How to get the width and height of the viewport with vanilla JS | Go Make Things | Sciencx | https://www.scien.cx/2021/04/09/how-to-get-the-width-and-height-of-the-viewport-with-vanilla-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts