Different CSS files for different detected screen width

Forum Moderators: open

Message Too Old, No Replies

Different CSS files for different detected screen width

javascript help needed!

dillonstars

5:38 pm on Sep 24, 2007 (gmt 0)

Hi,

As suggested in this thread [webmasterworld.com...] , I would like to use Javascript to detect the browser width and use alternative css properties for certain elements on smaller screens.

I am very much a beginner when it comes to javascript and would appreciate any help that can be leant in helping me to achieve what I want.

Thanks!

dillonstars

5:30 pm on Sep 25, 2007 (gmt 0)

I have found this code:


if (screen.width < 1024)
link = document.getElementsByTagName("link")[0];
link.href = "size800.css";

Is there a better way to do it?

dillonstars

5:51 pm on Sep 25, 2007 (gmt 0)

As I say I'm a javascript noob, so it took me a while but it was very easy in the end.. i found that:

if (screen.width < 800)
document.write('<'+'link rel="stylesheet" href="http://www.domainname.com/css/smallscreen.css" />');

works well. It goes after the proper stylesheets in the head.

The smallscreen.css just has a few styles defined that overwrite the main ones, and I have a <noscript> section that also loads smallscreen.css, for those without javascript.

I'd be keen to hear if anyone knows how to do it better though.