SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member QRiO's Avatar
    Join Date
    Jul 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Monitor Resolution Detection

    I am developing a website in which I will support two screen resolutions ( 800X600 & 1024X768 ) by using two different stylesheets for better browsing experience. I need a code to detect resolution and then putting the desired stylesheet in page code at request time. If there is any server side language to be used with it then I can use PHP.

  2. #2
    SitePoint Wizard cmuench's Avatar
    Join Date
    Jul 2005
    Location
    At my computer
    Posts
    2,251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The following script is what your looking for.
    http://javascript.internet.com/css/s...olution-2.html

  3. #3
    SitePoint Member QRiO's Avatar
    Join Date
    Jul 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep. the correct solution. thanks

    but will it work for Linux/Mac's ?

  4. #4
    SitePoint Wizard cmuench's Avatar
    Join Date
    Jul 2005
    Location
    At my computer
    Posts
    2,251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should as its javascript. Put the script up and I will try it on my mac for you.

    P.S. I just did a quick search on google for javascript css changer or something like that.

  5. #5
    SitePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That script does not determine the dimensions of the monitor, but of the browser's display window. It is poorly written, in that it assumes there are only two browsers in the world and tests for them, not for support of the relevant properties. Any time you see a script that tests for userAgent or appName, run. A proper script tests for the property it intends to use, not a browser that uses that property.

    Screen.width and screen.height provide the raw dimensions of the monitor's display area.

  6. #6
    SitePoint Member QRiO's Avatar
    Join Date
    Jul 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this means that we have to provide stylesheet switch in our webpages just like new yahoo home page.

  7. #7
    SitePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure I follow. Certainly allowing the user to toggle is an option, but with screen.width & height you can determine the monitor's dimensions. Using window.innerWidth and innerHeight, on Mozilla (and many other) browsers and document.body.parentNode.clientWidth and clientHeight for IE (nearly all recent browsers will support this, in addition to IE) you can derive the actual browser display area. One approach or the other should allow an automated selection. (Note: I believe Yahoo! is using cookies to track the user's setting. Not necessarily what one might want to do.)

  8. #8
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You could even fetch the browser display width and height, and make a javascript-generated stylesheet, with calculated values for the layout, so that it flushes any browser smoothly.

    I wouldn't do it myself, but it would be a solution.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  9. #9
    SitePoint Member QRiO's Avatar
    Join Date
    Jul 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no I will also not do that. In that case I will like to put the default layout for 800x600 but for wider resolutions there will be a link, by clicking on it user will be swaped to the stylesheet optimized for 1024x768. The information about user can be stored in cookies.

  10. #10
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I might suggest, while it is a good idea to provide the user with the ability to select their display qualities, it would be simple to detect the browser window area (the browser's display area is probably more relevant than the actual monitor specs) and make an automated style selection off of that. Then the user could choose to override the automatic choice, but most users would probably be happy with the automated selection. Obviously, you would need to make the lowest common denominator the default for those without JavaScript enabled.

  11. #11
    SitePoint Member QRiO's Avatar
    Join Date
    Jul 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes your idea is good. perhaps the best one in this condition. lets see what others have to say.

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The best web pages are those that adapt to the resolution your visitor wants to use rather than a specific screen size that bears no relationship to the available display area even where the screen is actually set to a recognised size.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •