Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript screen width/height to PHP

I know it doesn't necessarily make any sense, but is there a way to run javascript on the client, find the screen width/height of the active browser, and then pass those variables to a PHP script?

All the common knowledge is usually PHP >> Javascript, never trust the client I suppose, and I can't find a way at the moment.

This is for a .php file, so blocks easily, but I cannot seem to do the reverse.

I am working on creating a JSON object, but then realized I still have the same wall to climb.

Thanks.

I am finding the interactions between technologies somewhat challenging as an amateur, but it makes me feel powerful to know. Maybe soon I'll be able to stop exceptions just with my hands. Well, the matrix reference fails, because that is what people do on a second tier literal level.

like image 658
Danedo Avatar asked Apr 03 '11 01:04

Danedo


People also ask

How do I find my screen size?

To evaluate the screen's length, height, and area, we can follow the same equations as for a flat one: height = diagonal / √(AR²+1) ; length = AR * height ; and. area = height * length .

How do I check my screen size in HTML?

Use window. innerWidth and window. innerHeight to get the current screen size of a page.


3 Answers

You can do this:

<script>
document.getElementById('hidden-field').value = screen.width + ',' + screen.height;
</script>

<input id="hidden-field" name="dimensions" value="" />

and submit the form. You could use AJAX to send that data instead, a cookie, an image, etc. I personally would use AJAX.

But yes, this is a case where you'll need to just trust the client at face value. However, if you are doing something with that data (like creating an image or something) you should still validate that the value makes sense so you don't end up trying to create an image that is 100 million pixels wide, etc.

like image 124
Matthew Avatar answered Oct 15 '22 18:10

Matthew


<script type="text/javascript">
    document.write('<img src="index.php?width='+screen.width+'&height='+screen.height+'"/>');
</script>

(oh lookie here, no AJAX :))

By the way, I highly advice not to use document.write, instead either use window.onload or something better from your preferred JS library (such as jQuery(document).ready(function(){ jQuery(document.body).append("the-image-as-in-my-example"); }) in jQuery).

like image 36
Christian Avatar answered Oct 15 '22 19:10

Christian


Fast one with jQuery

$(function(){
 $.ajax({
   url: 'file.php',
   type: 'POST',
   data: {h: screen.height, w: screen.width}
 });
});
like image 45
arma Avatar answered Oct 15 '22 19:10

arma