javascript:find screen resolution when having multiple monitors

Question

I am using this piece of code to determine the client screen resolution, and then logging it

<input type="hidden" id="DFF63C7E-FB32-49AE-8ADA-3AB5C4834FB0" name="DFF63C7E-FB32-49AE-8ADA-3AB5C4834FB0"/>
 <input type="hidden" id="565C07CF-0D37-41DE-B47D-A247E9BD231B" name="565C07CF-0D37-41DE-B47D-A247E9BD231B" />
<script type="text/javascript" language="javascript">
         document.getElementById("DFF63C7E-FB32-49AE-8ADA-3AB5C4834FB0").value = screen.width;  
         document.getElementById("565C07CF-0D37-41DE-B47D-A247E9BD231B").value = screen.height;
</script>

It worked OK when testing in my localhost, but what I found out from the production logs was that the screen resolution was always 480x640. Does anyone know why this happens ?

And I did some more digging and found that I could change the resolution of my primary monitor and regardless of whether I open my browser in primary/secondary monitor, it would always give me the resolution of the primary monitor.

Is there any way to get the screen resolution based on which monitor the browser gets opened ?

And obviously the next question is, if the resolution changes midway (say from control panel) or moving the browser from one to another, is there a way to detect/update it with JS ?

Answer 1

1. It might be that your production PC really has 640*480 screen resolution. Is there a reason to doubt it?
   
2. Javascript has no means getting out of its virtual machine to take even a glance on the real host, so you must implement your update mechanism by the same means you detect the screen resolution, whatever it is.

Answer 2

try this instead: window.document.width window.document.height