can anyone suggest a piece of javascript (I know nothing about js!) I could use in an external js file to select an appropriate css according to screen resolution. I have 2 css files prepared (800 and 1024) which help maintain the look of the site but I now need a way of implementing them.
Thanks,
Craig.
js + css + screen resolution
That's very simple.
Insert inside the head-element in your html page:
<script type="text/javascript"> <!-- if ((screen.width>=1024)) { document.write("<link rel='stylesheet' type='text/css' href='style_1024.css' />"); } else { document.write("<link rel='stylesheet' type='text/css' href='style_800.css' />"); } //--> </script>
You might want to include additional markup for browsers with
javascript disabled or not supporting javascript.
Insert after the javascript tag:
<noscript><link rel="stylesheet" type="text/css" href="style_800.css" /></noscript>
js + css + screen resolution
What if someone is in a higher resolution than the window width. My work machine resolution is 1024 but I always keep my browser window at 800 centered on my desktop. At home my resolution is 1600 but my window is 1024 centered on the desktop. In this instance both machines would get the same css but the first one would need to scroll left and right to view.
I recommend using a single CSS file that will work in all resolutions. That way you won't have to worry about screen widths, wondow widths, or javascript.
js + css + screen resolution
I do second to that. Even counting the window width is not the right way since people often resize browser windows.
Best practice is to create one good, fixed solution for all resolutions or design a liquid layout.
js + css + screen resolution
I'll take both answers ... for this site I'll use the two css and the next I'll try a single-please all css.
Thanks for the ideas.