Welcome to WebmasterWorld Guest from 23.20.147.6

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)

Preferred Member

10+ Year Member

joined:June 10, 2003
posts: 598
votes: 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!

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

Preferred Member

10+ Year Member

joined:June 10, 2003
posts: 598
votes: 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?

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

Preferred Member

10+ Year Member

joined:June 10, 2003
posts: 598
votes: 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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members