Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Swap the CSS file based on screen size

DHTML

Swap the CSS file based on screen size

by  BlindPete  Posted    (Edited  )
I wrote an application and developed it assuming that 1024 screen width was common as it turns out my customer used a mix of resolutions. If I had thought about it makes perfect sence. This ugly fact reared its head when I demonstrated an Alpha version of their application and the infocus projector only had 800x600 screen resolution and 20% of my app was off the screen! and my face was VERY red.

So bad on me, a hard lesson learned and here was the fix.

[color blue]
Code: 
<html>
<link href="manager.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
  if (screen.width < 1024)
    link = document.getElementsByTagName( "link" )[ 0 ];
    link.href = "manager800.css";
</script>
<head>
[/color]

this sample assumes a screen width 1024. If it is lower then 1024 it loads a stlye sheet designed for a width of 800.

I make heavy use of CSS for layouts and avoid use percentage layouts if text wrapping is going to be a problem. Rather then switch my design to lowest resolution I decided to extend it to three different screen widths: 800, 1024, 1280+. This allowed me to adjust the layout and font selection for different screen sizes and switch the CSS files dynamically on the fly.

Anyhow I hope this helps you and spares you my pain. Thanks to Tek-tips in helping me resolve this quickly.
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top