Different CSS for different resolution

Different CSS for different resolution (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

Ian K Gray -> Different CSS for different resolution (9/23/2004 11:57:05)
I've got a screen of information, nicely formatted via CSS, displaying on a big plasma screen (it's our internal monitoring system). I'd like to be able to adjust the formatting (e.g. font size) depending on the resolution of the system browsing to it. In fact the holy grail here is to be able to browse to it from my PDA and still get a readable display. Can anyone start me off here? Google do something like this (changes the home page if I go to it from my PDA, but I guess that's doing something slightly different). Ian

BobbyDouglas -> RE: Different CSS for different resolution (9/23/2004 12:00:21)
Can you use % size for the fonts here?

Donkey -> RE: Different CSS for different resolution (9/23/2004 12:07:19)
You need to look at a liquid or fluid layout. If you google for it there are lots of on-line examples. How have you specified your font sizes? if you use em or % values then they will scale with the page. Pixels or even worse point sizes won't. For very small devices you will need an additional style sheet, Caz posted some info here on this topic.

Ian K Gray -> RE: Different CSS for different resolution (9/23/2004 12:27:37)
This is excellent, but what it still doesn't tell me is how to automatically detect resolution or browser and completely change a stylesheet (or even load a different webpage) accordingly. Does that make sense? Ian

bobby -> RE: Different CSS for different resolution (9/23/2004 12:36:30)
Detecting screen resolution settings requires scripting, or a prewritten program like BrowserHawk (which is written in ASP I think) Basically you would use a JavaScript, ASP, php (etc) script to detect the display settings on a visitors computer and then dynamically change the style sheet depending on what values are returned... I've done this with an inline style sheet, but I've never tried it with a linked one... The biggest problem, other than having to know a little bit about scripting, is you'll have to build a whole new CSS for each screen resolution, which these days could be anywhere from 4-10 different sheets if you want to cover the entire gambit of possible resolutions There are only about 4 popular ones used, ranging from 640x to 1280x - but with the odd sizes and widescreen monitors available there are many more possibilities. It's much easier to use a % based on em for fonts, and % for sizes of layers and table cells so that one CSS will scale for all screen settings...

caz -> RE: Different CSS for different resolution (9/23/2004 15:30:32)
If you had followed the link that Donkey gave you, you would have come across a sample sylesheet for small screens using the media=handheld rule. A list apart There are many considerations needed when serving pages to handhelds, which the link above outlines and if you use liquid layout as suggested for screen viewing it should mean that you don't need to do any sniffing for them. A separate style sheet for handhelds using the @import rule should cover small devices.

d a v e -> RE: Different CSS for different resolution (9/23/2004 16:09:15)
one other thing to consider is that users may be browsing at 1024x728 or even 1600xwhatever but their browser may not be maximised, and their (browser) viewport may be say 600 pixels wide...

bobby -> RE: Different CSS for different resolution (9/23/2004 16:19:45)
Good point Dave... Another reason to go for the fluid layout. I'm guilty of that most of the time. I run 1024x rez but usually my browser is only taking up 60-80% of that at any given time... [8\|]

Page: [1]

Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI

0.046875