Question

I almost sure that PHP can’t detect the View port size of a browser right?

But since that, can someone teach me how can i do it with Javascript and then gather that size from a Javascript variable to a variable in PHP?

Regards

PS: Sorry if there is another post with the same question.

Answer 1

To get the viewport size, you must use Javascript, yes.
For examples of code doing that (not always easy, there are differences between browsers), you can take a look at how JS Frameworks/Libraries determine that size (for instance, in prototype.js, there is a getDimensions function that does what you want) ; google will get you lots of results about that too (this one is an example of those results)

Then, you must send that size to PHP. For that, two solutions :

• One is to use an Ajax request (sending the width and height as parameters)
• The other is to dynamically build an <img> tag, with an URL pointing to the PHP script, like 'http://.../size.php?w=WIDTH&h=HEIGHT'
  • many statistic software (things like xiti / google analytics — not sure if those ones do ^^ ) use that kind of method.

In the second case, the JS code could look like this :

<script type="text/javascript">
    var width = 100;
    var height = 80;
    var tag = document.createElement('img'); // Create the tag
    tag.src = 'http://tests/temp/viewport/size.php?';
    tag.src += 'w=' + width; // Pass the size
    tag.src += '&h=' + height;
    document.body.appendChild(tag); // Insert the tag into the page
</script>

And then, in size.php, you use $_GET[‘w’] and $_GET[‘h’].
Note : you will probably have to return some valid image data from size.php, to not get a “red cross” picture (a transparent gif, 1×1 in size, for instance, will do the trick)