- innerWidth: It returns the width of the window’s content area.
- innerHeight: It returns the height of the window’s content area.
- outerWidth: It returns the width of the browser window.
- outerHeight: It returns the height of the browser window.
Note: These dimensions are in pixels.
Since pixels are a dimensionally square unit. You cannot tell accurately how many pixels lie on the diagonal. You can approximate the diagonal by using the browser height and width and applying the Pythagoras theorem.
Pythagoras Theorem: For a right-angled triangle, hypotenuse squared is the sum of base squared and height squared.
Analogous to the above formula, Diagonal = Squared_root(Width^2 + Height^2).
The above code will print the browser height and width in the console window. The console window can be opened using the developer tools in your browser.
Note: To get the complete screen dimensions, switch your browser to fullscreen mode. Most browsers switch the fullscreen mode using the F11 key.
- Before pressing ‘Try It’ button:
- After pressing ‘Try It’ button:
Note: If you know the linear pixel density of your monitor screen, you can divide the dimensions obtained from the above code with the density to get the dimensions in centimeters or inches.
- What is the difference between “screen” and “only screen” in media queries?
- How to get the size of screen, current web page and browser window using jQuery?
- How to detect a mobile device using PHP?
- How to detect the user's device using jQuery ?
- How to detect a mobile device in jQuery?
- How to Create Skeleton Screen Loading Effect using CSS ?
- How to Align navbar logo to the left screen using Bootstrap ?
- How to Display Spinner on the Screen till the data from the API loads using Angular 8 ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.