Page is a not externally linkable
- Code, Content, and Presentation
-- JavaScript and AJAX
---- Different CSS files for different detected screen width


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.


Thread source:: http://www.webmasterworld.com/javascript/3459392.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com