Drupal template tpl definitions based on monitor/user screen size

Here is a question that I just received from a visitor to my website - since the answer is fairly extensive, I have decided to make a blog post out of it to provide a good layout for this and other users to review my proposed solution.

Question:

I want to hide or show right region by browser screen size, if >1024 right region show, if <1024 right region hide
like :
i try to to put something in my page.tpl :

     <?php if ($right): ?>
       <div id="sidebar-right" class="sidebar">
         <?php if (!$left && $search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
         <?php print $right ?>
       </div>
     <?php endif; ?>

i want :

     <?php if ($right): ?>
*show only if screen.size if >1024*
       <div id="sidebar-right" class="sidebar">
         <?php if (!$left && $search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
         <?php print $right ?>
       </div>
     <?php endif; ?>

can you help me ?

The easiest way to read the screen resolution of the user's display is by using a client-side technology such as javascript to read the value, and then pass it to PHP via some shared container (cookies, querystring etc). I prefer to use cookies since querystring will require javascript to reload the page, or load the next URL and this can be problematic and even compromise normal navigation if javascript is turned off or not available in the browser.

In (well commented) process below, we are going to read the screen-size, and write it as a cookie. After that, we will read the cookie using PHP, test it to see if it is greater than the required screen size, and then use that condition to write and style the template differently in each case.

<?php
/*
PHP cannot read the screen size or resolution, so you have to use a client-side technology to read the value, and then pass it to the server-size PHP using querystring, cookies, or JSon. In the example below, we will write a cookie and then have PHP read it and use it as a condition to determine if the right column should display or not
*/
?>

<script type="text/javascript">

/*define a function to write a cookie with a name and expiry date*/
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}

/*Get the screen width value*/
var my_s_width=screen.width;

/*write a cookie to store the screen width
This is done with every page load and so can expire every 2 days (arbitrary time) */
setCookie('s_width',$my_s_width,2);
</script>

<?php
/*
Use PHP to read the stored cookie value of screen with
*/
$my_screen_width = $_COOKIE["s_width"];
if ($my_screen_width > 1023){$my_large_screen = TRUE}
?>

<style type="text/css">
    /*you can store this in your external CSS file*/
    #content_core.layout_
        {/*assuming that when there is 1023+ pixels, the main column will be 800 and the right column will be 200 pix*/
            width: 800px;
            float: left;
        }
        #content_core.layout_
        {/*assuming that when there is less than 1023 pixels, the main column will be 900 pix centered*/
            width: 900px;
            margin: 0 auto;
        }
    #the_right_column
        {/*right column definition*/
            width: 200px;
            float: left;
        }
</style>

<div class="side_by_side">
<?php
/*embed condition to write certain parts of the template and even add classes that CSS can use toe xpand the main content area to occupy all possible size when there is no size column*/
?>
        <div id="content_core" class="layout_<?php if (!$my_large_screen) { ?>use_all_width<?php } ?>">
            <?php print $content; ?>
        </div>
        <div id="the_right_column">
            <?php if ($my_large_screen) { ?><?php print $right_column ?><?php } ?>
        </div>