Detecting User’s Display

@dthurman1432Jun 23.2006 — #CSS cannot detect the user's resolution. JavaScript can with: screen.width and screen.height.

Resolutions takes some serious pratice learning to deal with. The best page I've ever made so far, that works with all resoltutions, uses % measuements in all my widths and heights through out the page so my content resizes with the screen. % mesausements are based on the browser window size not your resolution. Thus, if you resize your browser window to tinne-tiny, when using % measurements, everything in the page will shrink with it -- even though you haven't changed your screen resoltuion. And vice-versa -- if you expand your browser window, all the % content grows with the page.

It won't happen if you went one step futher by putting your body content into a DIV/container that has a set width and height in pixels.

The last step is using JavaScript to detect the user's resolution and resizing the DIV's/container's width and height, in pixels, to the correct resolution. If JavaScript preforms this resize too late into the page load, it looks very unprofessional how the page "grows" before your very eyes. It's best to use a SCRIPT tag and a NOSCRIPT tag to initial the DIV to the correct size on the spot. If the user has JavaScript enabled the contents in the NOSCRIPT tag are overlooked by the browser and JavaScript will then detect the user's resolution and write a DIV with the a height and width in Pixels based on the user's resolution. Usually you just set the DIV to the resolution. If JavaScript is not enabled the SCRIPT tag is overlooked by the browser and the NOSCRIPT tag is used.

Then, since everything contained within the DIV will be in % measurements, all of the tags/elements will "grow" or "shrink" to the appropiate size.

In the future, I am thinking about making a JavaScript or Perl program that will accept either an uploaded HTML file or entered content through a textarea and it will change all your PX measurements into % measurements -- based on the browser window size you tell the program along with it. Then you'd have all your sizes in % simple as that. (not to mention MM, PT to PX convertions etc -- which would be done first to get those to % as well)

@felgallJun 23.2006 — #The screen resolution doesn't help you with working out the space in the browser window which will always be smaller since the browser itself ad any fixed toolbars take up screen space even if the window is maximized (which it may not be).

To test for the space in the browser window use the following functions:

function pageWidth() {return window.innerWidth != null? window.innerWidth: document.documentElement &amp;&amp; document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body != null? document.body.clientWidth:null;}
 function pageHeight() {return window.innerHeight != null? window.innerHeight: document.documentElement &amp;&amp; document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body != null? document.body.clientHeight:null;}

Detecting User’s Display

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Detecting User’s Display

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴