Detect the display resolution

Question

I need the help from people detecting the display resolution of a device using PHP.

My code is in trouble when switching interface I have the following code:

 $_page="home";
 if(get('page'))
    $_page=strtolower(get('page'));
 // Check if larger than 800px screen will show this code.
 $_pagePath='Includes/desktop/'.$_page.'_left.php';
 // Check if the screen is smaller than 800px will display this code.
 $_pagePath='Includes/mobile/'.$_page.'_left.php';  
 if(file_exists($_pagePath))
            include $_pagePath;
 else
    echo 'File '.$_pagePath.' not found';

Please help me finish this code.

Solution

You won't be able to detect the screen size with PHP, because PHP is serverbased. You could however detect the screensize with javascript and tell the server. Easiest way to accomplish this, would be to set a cookie.

Since you didn't say whether you want width or height, I assume in the following code that you are just interested in the bigger one of those.

<script type="text/javascript">
  var c=document.cookie;
  document.cookie='size='+Math.max(screen.width,screen.height)+';';
</script>

And then check it in your PHP script with

if($_COOKIE["size"]>800)
  $_pagePath='Includes/mobile/'.$_page.'_left.php'; 
else
  $_pagePath='Includes/desktop/'.$_page.'_left.php'; 

The only problem with this approach is that if a user connects for the first time he doesn't have the cookie yet, so the server won't know the resolution. Same applies for user who don't accept cookies.

Comments

[user3463111]

Thank you, But I want to improve how the cookie when accessed by a mobile device will display interface of mobile devices and access computer displays computer interface for a more rigorous manner.

[dingensundso]

Well the server won't be able to know the resolution unless the client says it. So best practice would be to do the resolution dependent differences on the client side not the server side. I don't know what the differences between your mobile and desktop version are, but if it's just the styles you could just deliver a generic version to the client and use CSS Media queries to change the design based on the resolution css-tricks.com/css-media-queries

[user3463111]

Hello,<br>The resolution displayed on the mobile device I want to have the size below 800px. It will display the UI directory: Incluce/Mobile<br>And the resolution on the computer I want to have on 801px size. It will display the UI directory: Incluce/Desktop<br><br>Thank.