Maintaining Control Size on Different Resolutions

  • Thread starter Thread starter Smithers
  • Start date Start date
S

Smithers

I would like to have a Web page that displays its control sizes consistently
regardless of the screen resolution.

Specifically, I don't want for the controls to appear tiny on screen when I
open the page on a high res monitor.

How can I accomplish this?

Thanks!
 
I would like to have a Web page that displays its control sizes consistently
regardless of the screen resolution.

Specifically, I don't want for the controls to appear tiny on screen when I
open the page on a high res monitor.

How can I accomplish this?

Thanks!
Click to expand...

You can use javascript to check user's screen resolution and load a
css depending on it. In the style sheet you can define how the control
should look like.

Here's an example of how to do check resolution

---------------------------------
var winW = 0, winH = 0;

if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth-16;
winH = window.innerHeight-16;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
}
if (winW <= 1600) {
document.write('<link rel="stylesheet" type="text/css"
href="1600.css">');
}
if (winW <= 1280) {
document.write('<link rel="stylesheet" type="text/css"
href="1280.css">');
}
if (winW <= 1024) {
document.write('<link rel="stylesheet" type="text/css"
href="1024.css">');
}
if (winW <= 800) {
document.write('<link rel="stylesheet" type="text/css"
href="800.css">');
}
if (winW <= 640) {
document.write('<link rel="stylesheet" type="text/css"
href="640.css">');
}
 
<snip>
Thanks! Quick followup question:

Does the following JavaScript line, when executed in the browser, cause the
browser to immediately download the css file (1600.css)?

document.write('<link rel="stylesheet" type="text/css" href="1600.css">');

-Smithers
 
<snip>
Thanks! Quick followup question:

Does the following JavaScript line, when executed in the browser, cause the
browser to immediately download the css file (1600.css)?

document.write('<link rel="stylesheet" type="text/css" href="1600.css">');

-Smithers
Click to expand...

It tells to browser that style sheet is there.

BTW, there is another way you might be interested

CSS3 which is a new CSS implementation could do following

-----------------------
@media screen and (min-width: 1600px) {
@import '1600.css';
}
-------------------------

It will load '1600.css' if output is screen and width is 1600

More about CSS3: http://www.w3.org/TR/css3-mediaqueries/

The only problem what CSS 3 is under development and may not work in
all browsers.

Hope this helps
 
Back
Top