Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Different CSS files for different detected screen width

javascript help needed!



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

10+ Year Member


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.



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

10+ Year Member

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?


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

10+ Year Member

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.


Featured Threads

Hot Threads This Week

Hot Threads This Month