CODEWITHSUNDEEP
javascriptandroidhtmlcss
amit
amit

Reputation: 10261

Detect low res android devices

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?

Upvotes: 0

Views: 267

Answers (2)

Nathan
Nathan

Reputation: 11149

Well first you detect the monitor's resolution with screen.width and screen.height.

if (screen.width < 320 || screen.height < 320) {
    ....
}

Then you need to actually load the stylesheets. The easiest way is to include this outside of any loader or anything so you can just document.write it.

if (screen.width < 320 || screen.height < 320) {
    document.write('<link rel="stylesheet" src="lowres.css"></script>');
} else {
    document.write('<link rel="stylesheet" src="desktop.css"></script>');
}

Upvotes: 1

JMax
JMax

Reputation: 26591

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:

Upvotes: 1

Related Questions