PDA

View Full Version : Detecting screen res and display different html depending on it



Richard
May 6th, 2003, 12:52 AM
I made this but it only works in IE not Mozilla or Netscape...



<html>
<head>
</head>
<body>
<script language="JavaScript">
w=screen.width;
h=screen.height;
if (w==1024&&h==768) {
document.write('<center>blah</center>');
}
</script>
</body>
</html>


How can I make it work in the other browsers?

Vladdy
May 6th, 2003, 01:07 AM
First of all, you need to use CSS for formating not HTML.
Second, you need to stop thinking about web site as you would of print media which has to fit certain paper format. View it as depository of information that can be accessed by all kinds of devices, some of which may not have any resolution at all.
Third, for on-screen presentation you need to be concerned not with resolution but with the size of the browser window. Not only users may browse with their browser not maximized, you can never predict the size of crome elements.

Richard
May 6th, 2003, 01:14 AM
Thanks for that advice but I'd like to know anyway.

:)

Vladdy
May 6th, 2003, 01:27 AM
use document.body.scrollHeight and document.body.scrollWidth to detemine the size of brower window.

Richard
May 6th, 2003, 01:48 AM
The thing you've done on your site with the logo in the middle is good and I'd use it but it only works in IE.

Vladdy
May 6th, 2003, 01:55 AM
What you've seen is just a temporary page, which I did not care to make look the same in all browsers.
What I am doing on my site is a liquid layout that adjusts to whatever the window size is. You can preview the design at http://www.klproductions.com/home.html

BrainJar
May 6th, 2003, 06:39 AM
In addition to the window size and chrome considerations, different fonts,system font settings (like Large Fonts in Windows) and view options can throw off any pixel measurements for content.

A liquid (or jello) layout using CSS is your best bet.