Simply use the width and height property of the window.screen object to get the resolution of the screen (i.e. width and height of the screen).
screen.width
screen.heightBonus: Firefox now has “Responsive Design Mode” Which is the best for doing responsive testing that I’ve seen on any browser.
The shortcut is Cntrl+Shift+M and you’re in a fantastic mobile view with complete control over the size of the screen whilst still being able to open the dev tools.
JavaScript detects screen size responsively
A simple example code detects Screen Resolution.
<!DOCTYPE html>
<html>
<body>
<script>
function getResolution() {
Console.log("Screen resolution is: " + screen.width + "x" + screen.height);
}
</script>
<button type="button" onclick="getResolution();">Get Resolution</button>
</body>
</html>
Output:
Detect screen size change
window.onresize = function(){
console.log("resize");
}JavaScript is easy to resize for screen size
This code allows for an Obj instance to run methods on – to call code when a screen change occurs.
//https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.6/enquire.min.js
class ScreenSize{
addCSS(maxOrMin, screenSize, element, style, change){
enquire.register("screen and ("+maxOrMin+"-width: "+screenSize+")", ()=>{
document.querySelector(element).style[style] = change;
});
}
}You can also listen to resize events to update your layout dynamically. Here’s a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Screen Size Detection</title>
</head>
<body>
<script>
function handleResize() {
// Get the width and height of the window
var width = window.innerWidth;
var height = window.innerHeight;
// Display the width and height
console.log("Width: " + width + ", Height: " + height);
// You can add your responsive logic here based on screen size
if (width < 600) {
console.log("Small screen");
} else if (width >= 600 && width < 1200) {
console.log("Medium screen");
} else {
console.log("Large screen");
}
}
// Call handleResize initially
handleResize();
// Listen for resize events
window.addEventListener('resize', handleResize);
</script>
</body>
</html>In this example:
- The
handleResizefunction gets the current width and height of the window usingwindow.innerWidthandwindow.innerHeight. - It then logs the width and height to the console for demonstration.
- You can add your responsive logic within this function to adjust your layout or perform other actions based on the screen size.
- The
handleResizefunction is called initially to get the initial screen size, and then it’s attached as an event listener for theresizeevent, so it gets called whenever the window is resized.
You can customize the conditions inside the handleResize function according to your specific requirements for different screen sizes.
Do comment if you have any doubts or suggestions on this JS screen topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version