Help
If you would like to redirect mobile users to a stylesheet more suitable to viewing on a mobile device, use this excerpt from Christopher Schmitt's CSS Cookbook, Third Edition.
Detect the screen width of the current browser and redirect the browser to a more mobile-friendly version of the site’s design:
<script type= "text/javascript">
if (screen.width <= 481) {
document.location = "http://mobi.example.com/"
}
</script>
The base resolution relies on the Javascript being able to detect the browser width (based in pixels). If the browser width is less than or equal to 481 pixels, it’s assumed that the browser is a mobile device.
Note
Not all mobile devices have Javascript.
You can also flip the script to detect whether a user’s browser has a larger-than-average browser window open:
<script type= "text/javascript">
if (screen.width <= 481) {
document.location = "http://mobi.example.com/"
} <strong class="userinput"><code>else if (screen.width >= 1280) {</code></strong>
<span class="strong"><strong>document.location = "http://high-def.example.com/";</strong></span>
<span class="strong"><strong>}</strong></span>
</script>
Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.
