How to get screen resolution using Javascript

Last updated on August 8th, 2022 at 09:55 am

This is a simple script that can capture screen resolution of a user. We are using screen function available in javascript. Here are some of the attribute you can use while dealing with screen

As we can see screen has attributes like

• availWidth
• availHeight
• width
• height
• colorDepth
• pixelDepth
• top
• left
• availTop
• availLeft

In this tutorial we are just focussing on width and height attributes within screen

The script we have just alert the width and height of the display used by the user.

<script LANGUAGE="JavaScript">
function resolution_finder() {
alert("Your screen Width is "+screen.width+" and Height is "+screen.height)
}
</script>

Call the above Javascript by using an HTML button

<input type=button value="Click Me And Redirect" onClick="resolution_finder()"/>

Function resolution_finder() will be called once the user click on the button.

Demo

Redirect based on Resolution

If you would like to redirect the users based on their display resolution use this logic. A good use case for this approach is redirecting users automatically to your mobile or desktop website based on their screen resolution.

Replace the resolution_finder() with the code below. This script will redirect users to Mobile website if their resolution is less that 640(h) and 480(w)

function resolution_finder() {
var url640x480 = "YOUR_MOBILE_URL";
var url800x600 = "YOUR_DESKTOP_URL";
if ((screen.width < 640) && (screen.height < 480))
window.location.href= url640x480;
else 
window.location.href= url800x600;
}

Update the URL according to your requirement.