Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    different page versions for different res.

    Need to figure out a few more things.

    I want to make one page look basically the same on all the different resolutions.

    So, I'm thinking I should make like 5 different versions of the same page.
    How do I figure out what resolution the user has? After that, how do I tell my site which page version to display.

    I want my preformatted paragraph to start at the center of the page, and be displayed down to a particular sentence without the user scrolling, regardless of their resolution. So, 5 different versions with different font sizes, to ensure on larger resolutions the paragraph stops at the same sentence before scrolling and revealing the whole paragraph.

    Or, is there an easier way to do that?

    jbonham

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    the easier way to do this would be to code using percents for widths and not pixels, but here is a link to one of the few many screen size detection and redirect scripts, you possibly modify it ot spit out different css files instead of making 5 different pages, http://www.dynamicdrive.com/dynamicindex9/info3.htm

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,790
    Thanks
    8
    Thanked 131 Times in 129 Posts
    <script language="Javascript" type="text/javascript">
    if (screen.width < 1024) {
    document.write('<link rel=stylesheet type="text/css" href="smallres.css">');
    }
    if (screen.width >= 1024 && screen.width < 1280) {
    document.write('<link rel=stylesheet type="text/css" href="mediumres.css">');
    }
    if (screen.width >= 1280) {
    document.write('<link rel=stylesheet type="text/css" href="bigres.css">');
    }
    </script>

    This way you only need to change thye CSS files for each screen resolution.

    You can add to it and make it more specific.

    <script language="Javascript" type="text/javascript">
    if (screen.width = 800) {
    document.write('<link rel=stylesheet type="text/css" href="800.css">');
    }
    if (screen.width = 1024) {
    document.write('<link rel=stylesheet type="text/css" href="1024.css">');
    }
    ETC...
    </script>


  •  

    Posting Permissions

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