Get Monitor Screen Resolution with Javascript

Find out and display a user's screen resolution with javascript.

In javascript, the screen.width and screen.height properties contain the size a visitor's monitor is set to. Bear in mind that the size the monitor is set to is not the same as the size of the browser window a visitor is using - windows can of course be set to different sizes. To find out this information you need to check the height and width of the viewport (different methods for different browsers, unfortunately).

Your current screen resolution (if you have javascript enabled) is

To display a visitor's screen resolution, simple include the following code in your page:

<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>

Screen resolution redirect

Once you know what a visitor's screen resolution is, you can redirect them to a particular page. Admittedly, you'd be better off with a page that worked at any screen resolution, but anyhow ;)

The script below will redirect users based on whether or not they have a monitor resolution of 800x600 or below:

<script type="text/javascript">
if ((screen.width<=800) && (screen.height<=600)) {
 window.location.replace('http://example.com/800-600-or-less');
}
else {
   window.location.replace('http://example.com/greater-than-800-600');
}
</script>
Category: 

Comments

Awesome! Thanks so much,,,,,

Awesome!
Thanks so much,,,,,

Thanks a lot..

Thanks a lot..

a program that get the screen

a program that get the screen resolution using traditional JAVA.. note javascript.. please help

Thanks a lot!! this is really

Thanks a lot!! this is really helpful..

Is there any way we can get

Is there any way we can get the size of the client browser window?

Really a nice and useful one

Really a nice and useful one to play around

Thanx

Thanx

How to change the visitors

How to change the visitors(clients) screen resolution according to our site resolution???
will the above code work for this??? plz reply soon.........

I was looking for something

I was looking for something similar to this. I need to redirect users who use screen resolution smaller than particular size. for example, if some users access to me website from their cell phone than I will redirect them to different style that works perfectly with phone browser. Is there any way to do something like this.
thanks

This seems like a pretty bad

This seems like a pretty bad idea. You should write just *one* version of a web page and use CSS @media scopes to control its appearance on different screen sizes.

Ah, I love sort efficient

Ah, I love sort efficient code :)
thank you so much.

Is there any ideas to detect device? Maybe like iPhone, iPad, Android etc?
many thanks :D

Given how stunningly low brow

Given how stunningly low brow this article is, and the number of amazed (and clueless, apparently) readers that have posted crap like "Cool!" or "Wow!" etc., I'd say there are an awful lot of web developers out there that should be looking at a career change. May I suggest the food service industry? I understand Burger KIng is hiring.

Add new comment