View Full Version : Browser resolution detection - other css for lower res

07-21-2008, 07:24 PM
Hi I have a questione, I'm developing a site and I need to create browser detection script that will load diffrent classes do xHtml when browser resolution is lower than 1280x960. I don't know JavaScript so asking for help anyone??

PS Sory for bad english, still learning.

07-22-2008, 01:02 PM
I know how to detect a users screen resolution, here's a small tutorial from javascriptkit.com: http://www.javascriptkit.com/howto/newtech3.shtml

07-22-2008, 01:23 PM
Check the following code

<script type="text/javascript">
alert('Your screen resolution is ' + screen.width + ' X ' + screen.height);

07-22-2008, 08:29 PM
hmm, not working how i expect. I need a javascript or maybe a php script that would detect a user screen resolution and customize a little part of css to tahat resolution. How to do that??

07-22-2008, 09:14 PM
Well, I know in IE, you can do this:

<style type="text/css">
#block {
border: 1px solid #000;
background: blue;
height: expression(screen.height/2);
width: expression(screen.width/2);
<div id="block"></div>

But I don't know how you could do it in FF, you can try document.getElementById (http://www.tizag.com/javascriptT/javascript-getelementbyid.php).

07-23-2008, 06:15 AM
Here's an example of the document.getElementById approach, because I didn't understand Nile's suggestion at first.
window.onload = function (){
var element = document.getElementById('element');
element.style.height = screen.height / 2;
element.style.width = screen.width / 2;

07-23-2008, 08:31 AM
This isn't a very good idea. If the user has javascript disabled, what then? You need to design your site so that it can be viewed in a variety of resolutions. What many novice designers don't realize is that the default text size on a browser generally varies by resolution. Folks with smaller monitors use smaller text size, those with larger monitors and higher resolution use a larger text size. Because of this, if you specify your text size and other key dimensions in relative units, percent values are ideal for text and many other items, em units (a unit based upon the current text size) are good for pretty much the rest, the user can always adjust, and in most cases won't even need to.