2

I'll start by saying that this question has been answered in some depth at: How can I get the screen resolution in java?

My question is not so much how to get the client's screen resolution but rather an explanation of the values that the Toolkit, GraphicsDevice, and Javascript screen detection return and more importantly why they aren't consistent. Through that I hope to achieve a better way to detect a user's (client side) screen resolution.

I am testing on my own machine and have set up multiple ways of detecting the client side screen resolution. I have a dual monitor setup but i'm only running the browser on one of the monitors. The first monitor is 1920X1080, the second 1680X1050.

Toolkit toolkit = Toolkit.getDefaultToolkit();
Dimension dimension = toolkit.getScreenSize();
System.out.println(dimension.width + "/" + dimension.height); //3600X1093

This method seems the most precise since it's actually returning the resolution of both monitors. It returns a value of 3600X1093

GraphicsDevice gd = GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice();
int width = gd.getDisplayMode().getWidth();
int height = gd.getDisplayMode().getHeight();
System.out.println(width + "/" + height); //1920X1080

This method seems to return the value of the first monitor. I'm assuming I can get the second monitor by changing the default screen device but there is no way for me to know which monitor the user is using so that's a moot point. None the less, it returns a value of 1920X1080.

var width = screen.width;
var height = screen.height;
console.log(width + "/" + height); //1680X1050

It appears javascript is the most precise (obviously...) because it knows the actual value of the browser window. I understand I can't achieve this server side, but I included the javascript because I am comparing the server side values to that.

First and foremost, the better choice seems to be the toolkit method. Does this actually detect the client's resolution, or is it returning the value of the monitors that the server is currently running on? If it's returning the client values, how is it getting those?

The primary reason for client side resolution detection on the server is because I want to build an adaptive images server. In other words detect that max screen size and return images that are appropriate.

Can anyone explain the difference between the methods and which one (or another perhaps) is the best for detecting the client's resolution?

Community
  • 1
  • 1
ryandlf
  • 27,155
  • 37
  • 106
  • 162

1 Answers1

3

The java version will only return the server's values, because it is purely server side. The only way to have client side java is by using an applet.

Therefore, I'd recommend using a javascript solution.

Toon Borgers
  • 3,638
  • 1
  • 14
  • 22
  • I was coming to that conclusion. Know of any unobtrusive methods to doing this and having it still appear server side? I'd like to avoid having to reload the page multiple times to return the appropriate image sizes. – ryandlf Dec 23 '13 at 15:01
  • First off, since most people who have multiple browers will most likely only use one monitor, I don't think you need to worry about dual monitors that much. Second, to avoid reloads, maybe you can use [jQuery](http://jquery.com/). Just add an document ready listener, detect your screen size and use ajax to get the correct resolution images. – Toon Borgers Dec 23 '13 at 15:05
  • Images are loaded first though right? I thought of using javascript to add resolution data to the image strings and then get that value when the image is loaded from the server (through a special servlet that catches all image requests). But is there a way to run the javascript and append those values before the actual images are loaded? – ryandlf Dec 23 '13 at 15:07
  • 1
    What I'd do is create an empty placeholder element in your page, and then when the page is loaded use jQuery to do an AJAX request to your server in which you put the client resolution. On the server side, you can construct the correct image URL and pass that back to the client. When the AJAX request completes, you can use that url to fill the empty placeholder element. – Toon Borgers Dec 23 '13 at 15:10
  • 1
    Maybe you can put some sort of "loading" image like [this](http://sierrafire.cr.usgs.gov/images/loading.gif) in the placeholder an when you have your real image put it there – Toon Borgers Dec 23 '13 at 15:15
  • Great ideas. I'll play around with it and hopefully post an update when i've come up with a good solution. You definitely got me thinking in the right direction though. – ryandlf Dec 23 '13 at 15:18