Results 1 to 7 of 7

Thread: Browser resolution detection - other css for lower res

  1. #1
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Browser resolution detection - other css for lower res

    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.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    I know how to detect a users screen resolution, here's a small tutorial from javascriptkit.com: http://www.javascriptkit.com/howto/newtech3.shtml
    Jeremy | jfein.net

  3. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Check the following code

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

  4. #4
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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??

  5. #5
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Well, I know in IE, you can do this:
    Code:
    <style type="text/css">
    #block {
    border: 1px solid #000;
    background: blue;
    height: expression(screen.height/2);
    width: expression(screen.width/2);
    }
    </style>
    <div id="block"></div>
    But I don't know how you could do it in FF, you can try document.getElementById.
    Jeremy | jfein.net

  6. #6
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •