Maintaining Control Size on Different Resolutions

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!On Nov 29, 8:59 pm, "Smithers" <A...@.B.com> wrote:
> I would like to have a Web page that displays its control sizes consistent
ly
> 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!
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="http://links.10026.com/?link=1600.css">');
-Smithers
On Nov 30, 12:33 am, "Smithers" <A...@.B.com> wrote:
> <snip>
> Thanks! Quick followup question:
> Does the following JavaScript line, when executed in the browser, cause th
e
> browser to immediately download the css file (1600.css)?
> document.write('<link rel="stylesheet" type="text/css" href="http://links.10026.com/?link=1600.css">');
> -Smithers
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