Keeping screen size in mind you may or may not want to show certain sections of the website on a certain device. We do have CSS media queries as a solution for this problem and they are extremely helpful when it comes to making a website responsive.
The screen size indicates the height and width of your actual device. The window size indicates the height and width of your browser window.
The area where you actually see the website content is known as the content area and this area also has a certain size. We are going to cover all 3 of them in this tutorial.
In the following example, we have one button element. Upon click of a button, we will display screen size, browser window size, and content area size. Please have a look over the code example and the steps given below.
HTML & CSS
We have 3 elements in the HTML file (div, hr, and button).
The hr element is just a divider between button and div elements.
The button element has “Get Size” as innerText.