Detect Visitor Browser view port size with Javascript and Save to a PHP variable.

Question

Hi there.

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

I guess this is how you can do it with jQuery:

var viewport_Width = $(window).width();
var viewport_Height = $(window).height();

but this method has a bug in Opera. See here:

http://dev.jquery.com/ticket/3046

use workaround for Opera.

Then you can send it to server (through POST or AJAX call) to save it in PHP.

Hope that helps.

Using a library like jQuery will avoid you many hassles and browser hacks. Seriously consider using one, it solves a lot of server side problems in the end.

Answer 2

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, 1x1 in size, for instance, will do the trick)

Answer 3

here's what I'd do (based on Pascal MARTIN's):

<script type="text/javascript">
    var tag = document.createElement('img'); // Create the tag
    tag.src = 'http://path/to/file.php?';
    tag.src += 'w=' + document.documentElement.clientWidth;
    tag.src += '&h=' + document.documentElement.clientHeight;
    document.body.appendChild(tag); // Insert the tag into the page
</script>

I have tested this on all major browsers (IE6, IE7, IE8, Firefox 2.x, Firefox 3.x, Opera 9.6x, Safari 3. and Chrome 2.x).