I plan on creating YouTube videos to give more details on how this is emplemented and how it works. Links will appear on this page when the videos are posted.

This page describes how to use Apache Server Side Includes (SSI) to deliver different style sheets to mobile and desktop devices.

The first section goes into your .htaccess file. It looks at the http header from the visitor's browser and if the visitor is using any of the defined operating systems, it sets an environment variable, in this case, called "style_moble" (you can name it anything you want) which is used on individual pages as described in the second section. If the operating system is anything else, then this varable is not set.

The following describes the code to be placed in your documents.

Note: that lines 6, 9 and 11 are never delivered to the visitor unless SSI is not enabled on your server. If SSI is not enabled, then lines 6, 9 and 11 will be delivered but because of the way the line is written at the start, (<!--) the visitor's web browser sees it like a comment field so won't display the lines.

Line 6, looks at the environment variables (set up above) and "if" the expression "style_moble" exists, lines 7 and 8 are delivered to the visitor.
Line 7 is a special line which configures the visitor's browser to scale the page to the width of the browser window.
Line 8 is then processed by the visitor's browser. The bowser then requests your style sheet configured for moble devices.
If "style_moble" is not present (IE if the person is using a notebook or desktop) then lines 7 and 8 are not delivered to the visitor and we move on to line 9.

Assuming the previous environment variable was not "style_moble" then we continue with line 9 with basically says "or else", line 10 is delivered to the visitor who's browser then requests your style sheet configured for large screens.

Line 11 is required to end the previous section. If this line is left out, the rest of your page may not work properly.