0

I have written a small javascript code to get screen dimensions of the user browser. At first, the src attribute of an img element is set to a static image url. When the page is fully loaded, the following code, calculate screen dimensions and send them to the server by changing the src of the img that now contains the dimensions as uri parameters (Later, at server side, these parameters will be processed):

  <img id="screenres" src="http://static.example.com/image.jpg" alt="" width="20" height="20" />

  <script>
 window.onload=function(){
     var w =Math.round(screen.width);
     var h =Math.round(screen.height);
     document.getElementById("screenres").src=
                 "http://www.example.com/screen/"+w+"/"+h;
  }
  </script>

This approach works perfectly in desktop browsers, but for mobile users it fails. Could you please tell me what is wrong in this approach? Thank you beforehand for your suggestions to overcome this problem.

Ormoz
  • 2,975
  • 10
  • 35
  • 50
  • 1
    When you say it does not work, does it fail or does it not display as expected? The screens may be small, but often the res is way up in the desktop realm. – Anthony Horne Apr 27 '15 at 20:21
  • Do you have a link to a page where this is working for desktop, but not for mobile? – Lloyd Banks Apr 27 '15 at 20:22
  • @Anthony, It does not send the http request to server. – Ormoz Apr 27 '15 at 20:22
  • 1
    Agreed -- define "does not work", and how you determine that. Another thing to consider, are you waiting long enough? If the default image is large in size, onload might not fire for a seemingly-absurd amount of time, if your mobile data connection is slow. `onload` waits for all resources to be fully loaded. – Chris Baker Apr 27 '15 at 20:22
  • 3
    What about if you add `http://` to the starting of src? Check the second highest voted answer on http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window I am not sure if `screen` works on mobile – Huangism Apr 27 '15 at 20:22
  • @LloydBanks, unfortunately this site is under construction right now. – Ormoz Apr 27 '15 at 20:23
  • @Huangism - You just, just beat me to it. – Anthony Horne Apr 27 '15 at 20:23
  • @Chris Baker. I do not receive the request for the new uri. It is a small picture. Yes. I would wait forever but it does not seem to respond! – Ormoz Apr 27 '15 at 20:27
  • @MikeSmithDev not hard to set up a server side controller that uses url segments to do that – charlietfl Apr 27 '15 at 20:28
  • @Huangism The original code has `http`. I forgot to enter it in the question. I corrected it. Thanks. – Ormoz Apr 27 '15 at 20:29
  • @MikeSmithDev I catch the request in `htaccess` and then in `php`, read the `w` and `h` parameters and then send the image file. – Ormoz Apr 27 '15 at 20:31
  • @MikeSmithDev but it works in desktop browsers – charlietfl Apr 27 '15 at 20:39
  • 2
    The fact that it is working in desktop is a good indicator of some failure in the javascript. If you aren't set up to check the console output of a mobile browser, start with making your code as simple as possible -- hard code some arbitrary numbers into your script and try it that way. If that works, then your error is with the way you're measuring the screen. As noted, `screen` may not be available. If it doesn't work with hard-coded values, something else is going on... add an `alert` to ensure the script is running at all. Let me know what you discover. – Chris Baker Apr 28 '15 at 00:48

1 Answers1

2
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
Ed Knowles
  • 1,925
  • 1
  • 16
  • 24