How to detect the screen resolution with javascript

In javascript, the screen.width and screen.height properties contain the size of a visitor’s monitor is set to. Bear in mind that the size of the monitor is set to, is not the same as the size of the browser window a visitor is using as windows can of course be set to different sizes. To get screen resolution with javascript we need to get the height and width of the viewport which depends on browser.

Simply we can get scree resolution by using following code :

window.screen.availHeight
window.screen.availWidth

1 2	window.screen.availHeight window.screen.availWidth

var width = screen.width;
var height = screen.height

1 2	var width = screen.width; var height = screen.height

After detecting the screen resolution, we can make decision based on that.. like redirecting on another compatible page eg.

<script type="text/javascript">
if ((screen.width<=1000) && (screen.height<=768)) {
 window.location.replace('YOUR URL I');
}
else {
   window.location.replace('YOUR URL II');
}
</script>

if ((screen.width<=1000) && (screen.height<=768)) {

window.location.replace('YOUR URL I');

}

else {

window.location.replace('YOUR URL II');

}

</script>

So it is very simple How to detect the screen resolution with javascript. There may be other ways also by which we can detect screen resolution.

Leave a Reply Cancel reply