Question

I want to be able to detect if the current user is using a low-res ( < 320px) device and load a different stylesheet for that user. Is there a way to do so?

Answer 1

You can find many articles on the web explaining how you can build good website designs for smartphones.

To answer your case, you can find several ways to handle it:

Media Queries

Since CSS3, you can use the max-width or the device-width.

That would give something like:

<link rel="stylesheet" type="text/css"
    media="screen and (max-device-width: 480px)"
    href="shetland.css" />

JavaScript

You can use javascript to check the browser width.

Here is an example using jquery:

if ($(window).width() < 320) {
   $("link[rel=stylesheet]").attr({href : "mobile.css"});
} else {
   $("link[rel=stylesheet]").attr({href : "desktop.css"});
}

Going further

Here are a few interesting and useful links:

• Responsive web Design on Smashing Magazine
• Detect Mobile Devices on about.com
• An older article (but where you can find some useful tips too