Javascript and PHP Size Based Styles

So you want to support different screen resolutions do you? Well, it is possible too much difficulty by creating a multiplexer for CSS files. This solution I am speaking about involves creating several style sheets for popular screen resolution groups and a cookie to save the information and redirecting when the cookie is not set. This solution should be handled with care as cookies are not always supported and could create and endless redirect.

Javascript and PHP Size Based Styles – Details

The PHP Side of the equation

$res = isset ( $_COOKIE["res"] ) ? $_COOKIE["res"] : "" ;
$res = split ( "x", $res ) ;
if ( !empty ($res) && count ( $res ) == 2 ){ // naive sanity check
    $width = (int)$res[0] ;
    $height = (int)$res[1] ;
    if ( $width == 800 && $height == 600 ){
        $css = "css/xsmall.css" ;
    }else if ( $width == 1024 && $height == 768 ){
        $css = "css/small.css" ;
    // ... possibly more resolutions
    }else{
        $css = "css/normal.css" ;
    }
}else{
     $css = "css/normal.css" ;
 }

The Javascript Side

function checkCookie(){
    var res=getCookie("res");
    if (res!=null && res!=""){
    }else{
        res = screen.width +"x"+ screen.height;
        setCookie("res",res,365);
        document.location.reload();
    }
}
checkCookie();

How The Solution Works

The solution can work when you put the script code in the head of your web page with script tags surrounding the code. When the interpreter reads the “checkCookie” call, the idea is to check if the cookie is set and if not then set it and redirect. Again, if cookies are not supported in the browser a session variable may have to be set to detect this and prevent a redirect loop. The php side will attempt to gain access to the cookie and upon success sets a variable to the “correct” css file and sets a default on error.

Dependencies

The dependencies are a getCookie function and a setCookie function which you can write yourself or find on w3schools. Of course if you are using a library like jQuery or Mootools, there is probably a plugin that you can use to help yourself out as well.

What is Missing?

The session code is missing here and I leave you to implement or wait for a followup. The css files are also missing and this makes 100% sense as it would be impossible to provide a solution for every web page scenario that exists today. The things to keep in mind when customizing for different sizes is that things will tend to wrap funny when using floats and fixed sizes will most likely need to be adjusted as well as absolute positioned and relative positioned elements. The nice thing here is that if the styles are not embedded within the content elements, id’s and classes are used appropriately, this should be a somewhat straight forward process.