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>

Related Tools

If you want to actually test different screen resolutions, use the Screen Resolution Checker

Category: 

Comments

good one

good one

Thanks for the info

Thanks for the info
I used this code in my website.

Thanks boddy ,,, ?

Thanks boddy ,,, ?

Screen resolution is given in

Screen resolution is given in pixels per meter, or similar. screen.width does not give screen resolutions.

JayZ - screen or display

JayZ - screen or display resolution is the agreed terminology to refer to the pixel dimensions of a screen. You could argue that this is not entirely accurate, but generally people refer to PPI/DPI using different terminology - that's just the way the language has evolved. Don't blame me ;)

This work only with main

This work only with main window :-( i have 2 monitors, one is 1440x900 and second 1024x768 using script and browser on second monitor(1024x768) i get resultat 1440x900 do you have idea how i can solve this problem?? tnx

pl. tell me argent how i can

pl. tell me argent how i can create fixable website window in any screen resolution

thx

thx for ur info

thx for ur info

I did it like this.Helped me

I did it like this.Helped me a lot.tnx
function getClientResolution() {
//document.write();

var res = $get("");
res.value = screen.width + 'x' + screen.height;
//alert(res);
}

this might be helpfull, this

this might be helpfull, this code gets the resolution with java then makes php variables with it:

var reswidth= (screen.width)
var resheight= (screen.height)

just make a file called: getres.php, and you can include it in any php file with:
require("getres.php");

$reswidth; is the width only,
$resheight; is the height only,
$res; is width x height.

hope it helped.

Hey, what is when I wnat only

Hey, what is when I wnat only the screen resolutio:
if weidth:0-800 and height 0-600

if wiedth 801-1024 and height 601-768

how do I code this..like to ifs

Mr. Langton

Mr. Langton
Thank You very much.
We really appreciate your work.

Great info Thanks

Great info
Thanks

Cant believe how simple this

Cant believe how simple this was. Theres more to the web than php..=)

excellent solution!

excellent solution!

Thanks Andy,

Thanks Andy,

I am thinking of re-designing some of my URLs and may incorporate some of this to offer my users a better experience.

Harry

What would the argument be

What would the argument be for else if you just wanted the browser to stay on the current page?

Awesome! Thanks so much,,,,,

Awesome!
Thanks so much,,,,,

Thanks a lot..

Thanks a lot..

Hello,

Hello,

Oke, but can I change my body height according to the document.getElementsByTagName('body')[0].clientHeight?
Like to show what I mean:
Body {
Height = document.getElementsByTagName('body')[0].clientHeight;
}

And crossbrowser.
I'm trying all kind of things but it doesn't work.

Is there a way to get the

Is there a way to get the window resolution as opposed to the screen resolution?

Thanks!!!

Thanks!!!
THis is really useful.

I understand importance of

I understand importance of the matter but not sure how to implement it in my webpage.

Can anybody put some light?

asish@astrocopia.com

Regards

Great work done. It really

Great work done. It really solve my problem. Thanks.

Good Article, Thx

Hi there,

Hi there,

I use javascript tot determine the screen resolution and then write a different body an d table tag at the top of the page. How do searchspiders handle this?
Regards!
Ed

Hi Andy, I want to know that,

Hi Andy, I want to know that, Is this script will work with dynamic generated content from php. Like I'm creating a blog which fetches all the posts from db and each post has anchor for comment which pops up a form for writing the comment, and close it back. I was write a very simple solution that wasn't work only work with first post. url is here. http://jsfiddle.net/5A4Vh/1/

for "auto insurance" and

for "auto insurance" and anyone else wishing to explore further. Screen object is a property of the Window object as described here: http://www.w3schools.com/jsref/obj_window.asp

This page is found in the javascript References: Browser objects.

Thanks, Andy -- this article helped me find out several other things as well.

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

Thank you dear sir. I am

Thank you dear sir. I am using it to offer different pages dependent on the screen resolution at my site. I am trying to build a 3D book site using VRML. A universal page is not really practical in this, and your code is an absolute legend!

Murali

nice answer i like it too

nice answer i like it too much

Thanks Andy! I just needed a

Thanks Andy! I just needed a quick snippet to plug into a module on my site so that visitors would be able to know what resolution desktop wallpaper to download! Worked like a charm!

You can use jQuery to make

You can use jQuery to make your web page fit on any screen size by calculate the screen size minus the enough width to deduct to fit the screen size...

just like this...

$(document).ready(function(){
$("#mainContainer").css("width", screen.width - 32 + "px");
});

...but before this, you need first to link the jQuery library to your page...

...see a demo on this link:
http://tnhs.heliohost.org/home.html

Thanx

Thanx

Thank you so much - you've

Thank you so much - you've saved me hiring a freelancer !!

Hey! Thank You for posting

Hey! Thank You for posting this! I just designed and published some wallpapers on one of my sites.

Everything looked and worked great, then it dawned on me that a lot of people may not have any idea of their actual screen resolution. I did a search for some javascript code that could present it to the users and I found your site!

Excellent! Short, Sweet, and Effective. Here's what it looks (and works like) on my site http://voodoorules.com/wallpapers/VoodooRULEScomWallPaper_CoupleOnLeftHe...

Thank you

Joe

Will this script work on

Will this script work on Internet Explrer 9 or in other new version browser such as chrome and firefox. Has any1 testes it

Great bit of code mate - I

Great bit of code mate - I have a new project coming up and this is going to work the treat!

Thanks again.

Nice article, thanks for the

Nice article, thanks for the information.

Thanks - "Salamat" in

Thanks - "Salamat" in Philippines...

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 tryed it and it dident work

I tryed it and it dident work

Maqedoni said "testes"

Maqedoni said "testes" hehehehehe

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

my resolution is poor and the

my resolution is poor and the browser does not support proper color combination, what to do?

Is there any javascript

Is there any javascript detector that can help me with using different CSS ?
For example I want to have some different Views for my Site.
thank you.

thank you..............

thank you..............

such as chrome and firefox.

such as chrome and firefox. Has any1 testes it Will this script work on Internet Explrer 9 or in other new version browser

tnx a lot

tnx a lot

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

Add new comment