You can detect the screen size of your device and also get the current browser window size using JavaScript. You can access all these values from the global window object.
To get the size of the screen in JavaScript use width and height properties from the screen object, which is a property of the window object. To detect the current browser window size, there are innerWidth and innerHeight properties in the window object.
Let's see how we can use these properties to get the values with JavaScript.
How to Get Screen Size Using JavaScript
The screen object has several properties that you can use to get information about the screen, including the width and height of the device screen in pixels.
To get the width of the screen, you can use the screen.width property:
const screenWidth = screen.width;
console.log(`Screen Width: ${screenWidth}`)
To get the height of the screen, you can use the screen.height property:
const screenHeight = screen.height;
console.log(`Screen Height: ${screenHeight}`)
Also Read: Check Internet Connection Offline/Online Using JavaScript in Browser
Detect Current Browser Window Size With JavaScript
You can access properties directly from the window object in order to get the current browser window size. We have specifically two properties for this purpose.
Use the window.innerWidth and window.innerHeight properties to get the current viewport width and height (the part of the webpage that is currently visible in the browser window).
const viewportWidth = window.innerWidth;
console.log(`Window Width: ${viewportWidth}`)
const viewportHeight = window.innerHeight;
console.log(`Window Height: ${viewportHeight}`)
These properties only give the width and height of the webpage visible part. That means, they don't include the toolbars or scrollbars of a browser.
Also Read: Detect Device Orientation (Portrait/Landscape) in Javascript
Conclusion
It is important for you to know that these properties give you the size of the screen or browser window in pixels, not in centimeters, inches, or other physical units.
If you decrease the browser window size, the values of screen.width and screen.height will not change. Because the screen size of your device didn't change.
On the other hand, if you decrease or increase the browser window size, the values of window.innerWidth and window.innerHeight will change. Because the size of your browser's visible part will change.
