|
| |
|
|
Ian K Gray
Posts: 15
Joined: 9/6/2002
From: Scotland, UK
Status: offline
 |
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
_____________________________
Eh? Wot?
|
|
|
|
BobbyDouglas
Posts: 5455
Joined: 5/15/2003
From: Arizona
Status: offline
|
RE: Different CSS for different resolution - 9/23/2004 12:00:21
Can you use % size for the fonts here?
_____________________________
Arizona Web Design - Mr Bobs Web Design in Arizona
The Arizona Web Hosting Challenge
| |
|
|
|
Ian K Gray
Posts: 15
Joined: 9/6/2002
From: Scotland, UK
Status: offline
|
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
_____________________________
Eh? Wot?
| |
|
|
|
bobby
Posts: 11394
Joined: 8/15/1969
From: Seattle WA USA
Status: offline
|
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...
_____________________________
If con is the opposite of pro, is Congress the opposite of progress?
| |
|
|
|
caz
Posts: 3516
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
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.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
d a v e
Posts: 4064
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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...
_____________________________
David Prescott
Gekko web design
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
