MoreLesson 287Free preview
Get Current Screen Size
This lesson is part of How To · All levels
Summary
The size of the browser window can be read through properties such as window.innerWidth and window.innerHeight, which indicate the viewport area available. For physical screen sizes, use screen.width and screen.height. The value of the viewport can change as users change the size of the window, so it needs to be updated via event resize or monitored with matchMedia.
Key points
- Window.innerWidth and innerHeight measure the viewport including the scrollbar
- Document.documentElement.clientWidth measures the area of the content without a vertical scrollbar
- Screen.width and screen.height measure the physical screen of the device
- Event resize is used to update the display when the size changes
- For responsive design, CSS query media is more accurate than calculating size with JavaScript.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.