Screen Height & Width

[daybase]

I have to run same pages on a laptop and a high res monitor so I want to dynamically alter font sizes graphic dimensions etc depending on screen resolution. My solution so far is to read the screen height or width and call a PHP page with appropriate variables even to the extent of opening an appropriately sized window. PHP then takes care of re-sizing fonts etc. from there.

function whichscreen(){

if ((screen.width == 1280) && (screen.height == 800))
msgWindow=window.open("new1.php?

bf=3&fr=800","displayWindow",
"left=0,top=0,width=1280,height=800,scrollbars=yes,resizeable=yes,toolbar=yes,status=no,menubar=no");

else if ((screen.width == 1280) && (screen.height == 1024))
msgWindow=window.open("new1.php?bf=3&fr=1024","displayWindow","left=00,top=0,fullscreen=no,width=1280,height=924,scrollbars=yes,resizeable=yes,toolbar=yes,status=no,menubar=no");

}

My problem now is that I want to remove the set screen dimensions as there seems to be so many sizes shapes & resolutions of screen and dynamically adjust variables before opening new window and calling php pages.

My attempt was

function whichscreen(){
	wi=screen.width-200
	wh=screen.height-100
 	fr=screen.height
        msg='new1.php?          bf=3&fr='+fr+',"displayWindow",
"left=0,top=0,width='+wi+',height='+wh+',
fullscreen=yes,scrollbars=yes,resizeable=yes,
toolbar=yes,status=no,menubar=yes'
	
        msgWindow=window.open(msg);
}

This kinda works but doesnt - variables seem to get passed to PHP but window.open variables seem to be ignored. VERY VERY new to JS so all help welcomed and keep it simple please

 

[feherke]

Hi

Why do you think the browser window's size matches the screen size ?

And even if the browser window is maximized, the HTML document is displayed on smaller area than the window's size.

For example my screen has a resolution of 1024*768 but the pages are displayed on 1001*465.

Read this article, you may find something useful :

http://www.quirksmode.org/viewport/compatibility.html

Feherke.

http://rootshell.be/~feherke/

 

[daybase]

I see what you say but using screen.height
or screen.width in the way that I already do
does enable page to look in proportion depending
on monitor being viewed on.

Like I said new to me - so to clarify what is
screen.height the measurement of? Resolution
or screen area? Is there a better way of measuring
screen area?

Always open to suggestions.

 

[tmcneil]

daybase,

We normally add this javascript function to the top of some of our pages to automatically adjust the div to fit the current screen resolution. It supports three screen resolutions, but there is no reason that you couldn't add more or use it to fit your needs. Give it a try.

<script language="JavaScript">
//change DIV tag width dynamically
var divWidth = 1260;
var divHeight = 388;
if      ( (screen.width == 1280) && (screen.height == 1024) ) //1280 x 1024
    divWidth = 1260;
else if ( (screen.width == 1152) && (screen.height == 864) )  //1152 x 864
    divWidth = 1132;
else if ( (screen.width == 1024) && (screen.height == 768) )  //1024 x 768
    divWidth = 1005;
if (navigator.appName == "Microsoft Internet Explorer")
{
	divHeight = 388;
}

document.write ('<div class="scrollTable" id="scrollUserTable" style="overflow: auto;  height: ' + divHeight + 'px; width: ' + divWidth + 'px;">');
</script>

Good luck,
Todd