How to Get User's Screen Resolution with PHP

Getting the screen resolution using PHP

You can't do it with pure PHP. You must do it with JavaScript. There are several articles written on how to do this.

Essentially, you can set a cookie or you can even do some Ajax to send the info to a PHP script. If you use jQuery, you can do it something like this:

jquery:

$(function() {
$.post('some_script.php', { width: screen.width, height:screen.height }, function(json) {
if(json.outcome == 'success') {
// do something with the knowledge possibly?
} else {
alert('Unable to let PHP know what the screen resolution is!');
}
},'json');
});

PHP (some_script.php)

<?php
// For instance, you can do something like this:
if(isset($_POST['width']) && isset($_POST['height'])) {
$_SESSION['screen_width'] = $_POST['width'];
$_SESSION['screen_height'] = $_POST['height'];
echo json_encode(array('outcome'=>'success'));
} else {
echo json_encode(array('outcome'=>'error','error'=>"Couldn't save dimension info"));
}
?>

All that is really basic but it should get you somewhere. Normally screen resolution is not what you really want though. You may be more interested in the size of the actual browser's view port since that is actually where the page is rendered...

how to get user's screen resolution with PHP

You need JavaScript, not PHP.

var screenWidth = window.screen.width,
screenHeight = window.screen.height;

You can then send it to the server via Ajax (with an XmlHttpRequest).

See also the MDC window.screen docs.

Grabbing screen resolution and displaying results based on the size

Using Ajax, this is what needs to be done

<html><body>
<div id="content"></div>
....
<script>
$(function(){
$.ajax({
url: 'file.php',
type: 'GET',
data: {h: screen.height, w: screen.width}
}).done(function ( data ) {
document.getElementById("content").innerHTML=data;
});
});
</script>

That file.php would then run your database query and return a nicely formatted set of results (i.e. html table) based on the h and w parameters sent via ajax which tell you the height and width of the screen. To do this just set the $page variable depending on the size of the $_GET['w'] and $_GET['h'] variables. See below:

<?php
// get the function
include_once ('function.php');
$maxresults = 21;

$page = ( $_GET['page'] ? $_GET['page'] : 0 );

if(($_GET['w']) && ($_GET['h'])) {
$w = $_GET['w'];
$h = $_GET['h'];
//$maxresults = // calculate this depending on w and h
// i.e. if h > 1600 $maxresults = 20, else = 10
$currentpage = $page;
$page = $page * $maxresults;
$numpages = QuickQuery("SELECT COUNT(id) FROM books WHERE visible=1");
$numpages = mysql_result($numpages, 0);
$numpages = $numpages/$maxresults-1;
$result = GetBooksByRangeID($page, $maxresults);//Show <maxresults> pages at a time
//DisplayResults($result);
echo $results; // in a nice format (i.e. table) to be inserted into div via ajax
?>

You can calculate $maxresults as follows:

if($w > 640) && ($h > 480) $maxresults = 5;
if($w > 800) && ($h > 600) $maxresults = 7;
if($w > 1024) && ($h > 768) $maxresults = 12;
....
if($w > 2560) && ($h > 1600) $maxresults = 21;

Or you can group these statements by width (as I think thats less important than height, meaning less scrolling down for the user):

if ($w <= 1024) {
if ($h >= 768) $maxresults = 12; // 1024x(768 or higher)
else if ($h >= 600) $maxresults = 8; // 1024x(600~768)
else $maxresults = 6; // 1024x(599 or below)
}
else if ($w <= 1280) {
if ($h >= 1024) $maxresults = 14; // 1280x(1024 or higher)
else if ($h >= 960) $maxresults = 12; // 1280x(960~1024)
else if ($h >= 800) $maxresults = 10; // 1280x(800~960)
else if ($h >= 768) $maxresults = 8; // 1280x(768~800)
else $maxresults = 6; // 1280x(768 or below)
}
//and so on

see: http://en.wikipedia.org/wiki/Display_resolution#Computer_monitors

Revision

You code for populating maxresults is very poorly written, thats why it does not work. Try this:

<?php
include_once ('function.php');
$maxresults = -1;
if(($_GET['w']) && ($_GET['h'])) {
$w = $_GET['w'];
$h = $_GET['h'];

if ($w == 1920) {
$maxresults = 24;
} else if ($w == 1600) {
$maxresults = 24;
} else if ($w == 1440){
$maxresults = 12;
} else if ($w == 1366) {
$maxresults = 10;
} else if ($w == 1024) {
$maxresults = 8;
} else
$maxresults = 6;
}
echo $maxresults;

This will either output -1 if w and h are not being sent or it will return 24 or 12 and so on depending on your screen width. Learn to do some basic debugging on your code. It is difficult for me to debug your code without having all of it to hand.

Get server screen resolution in PHP

The only way I can think of that might work is executing an actual terminal command with exec, get the result and find the resolution in it. But please be aware of the dangers of exec and read the "Warning" section.

You properly need the correct permission to execute this kind of commands. So it depends on the type of server, operating system, etc. if this works.

Get browser width using php

You can't do that this way, here is a way to do it :

<?php
session_start();
if(isset($_POST['width'])){
$_SESSION['screen_size'] = array();
$_SESSION['screen_size']['width'] = intval($_POST['width']);
$_SESSION['screen_size']['height'] = intval($_POST['height']);
}

if(!isset($_SESSION['screen_size'])){
?>
<html>
<head>
<script>
function getSize(){
document.getElementById('inp_width').value=screen.width;
document.getElementById('inp_height').value=screen.height;
document.getElementById('form_size').submit();
}
</script>
</head>
<body onload='getSize()'>
<form method='post' id='form_size'>
<input type='hidden' name='width' id='inp_width'/>
<input type='hidden' name='height' id='inp_height'/>
</form>
</body>
</html>

<?php
}else{
var_dump($_SESSION['screen_size']);
}

This is a simple way, and the page will reload the first time.

You may want to use AJAX.

Also, if someone refuses sessions cookies, this would loop forever, better test if the browser accepts cookies.

How to get screen resolution of visitor in javascript and/or php?

What makes you think people always have their browser window maximised to the same size as their screen? I don't, and I'm not the only one.

What you want is to cover 75% of their window. This can be done using CSS; if the element in question is a child of the body element, then

#box {
position: absolute;
top: 12.5%;
left: 12.5%;
width: 75%;
height: 75%;
}

will probably do it (I've not tested it, though).

EDIT: I've now tested it, adding

html, body {
width: 100%;
height: 100%;
}

and it worked as expected, at least in Firefox 3.5 :-)



Related Topics



Leave a reply



Submit