Include php file according to screen resolution

Question

First, sorry for my poor english...

I've some troubles with my web page :

I want to load different style according to screen resolution.

I include in my pages the file style.php.

Here is the code :

    <?php
if(!isset($_GET['screen_check']))
{
 echo "<script language='JavaScript'>
 <!-- 
 document.location=\"$PHP_SELF?screen_check=done&Width=\"+screen.width+\"&Height=\"+screen.height;
 //-->
 </script>";
}
else 
{    
    if(isset($_GET['Width']) && isset($_GET['Height'])) {
 if(($_GET['Height']/$_GET['Width']) < 0.6) 
 {
 include("stylew.php");
 }
 else {
include("stylen.php");
  }
     }
     else {
     include("stylen.php");
     }
}
?> 

My problem is, when i load my page, I've an error message display for half a second, wich says : "undefined variable PHP_SELF", and it's kind of awful...But despite it, it works !

I wanted to do something like :

    <script>
if (screen.height / screen.width) < 0.6)
{
   <?php include stylew.php ?>
   }
   else
   {
   <?php include stylen.php ?>
   }

To get my variable without reloading my page. How can I do that ?

Thank you in advance !

Answer 1

Media Queries would be the best.

With javascript : use jQuery for compatibility in width / height detection.

Like ...

<script>
document.addEventListener('DOMContentLoaded', function() {
    var newStyle = document.createElement('link');
        newStyle.rel = 'stylesheet';
        newStyle.type = 'text/css';
    if ( ($(window).height() / $(window).width()) < 0.6 ) {
        newStyle.href = 'http://xxx1';
    } else {
        newStyle.href = 'http://xxx2';
    }
    document.getElementsByTagName('head')[0].appendChild(newStyle);
});
</script>