Getting the Screen Resolution Using 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.

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.

Mobile Redirect using Resolution in PHP

Since php is a server side language, it is not possible to detect screen resolution using php. You will have to use client side scripting to achieve the desired output.

Try the below javascript code

<script type="text/javascript">
if(screen.width <= 720)
{
location.href = "indexm.php"; // redirection
}
else
{
location.href = "index.php"; // redirection
}
</script>

Javascript to get screen width in PHP variable

Your simplest option might be to populate both options in the DOM, then use CSS3 Media queries to hide/show the proper element based on screen size.

So your HTML might look like:

          <li class="login-link"><a href="login.php">Log in</a></li>
<div id="fancy">
<li id="login">
<a id="login-trigger" href="#">Log in <span>▼</span></a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="email" name="Email" placeholder="Your email address" required>
<input id="password" type="password" name="Password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed in</label>
</fieldset>
</form>
</div>
</li>

And your CSS could look like:

.login-link, #login{
display: none;
}
@media screen and (max-width: 767px){
.login-link {
display: block;
}
#login{
display: none;
}
}
@media screen and (min-width: 768px) {
#login{
display: block;
}
.login-link{
display: none;
}
}

Edit: Fixed #login reference.
Edit 2: Adding JSFiddle Example JSFiddle Example



Related Topics



Leave a reply



Submit