www.webdeveloper.com
Results 1 to 11 of 11

Thread: Change Website According to Screen Resolution

Hybrid View

  1. #1
    Join Date
    Feb 2005
    Posts
    74

    Change Website According to Screen Resolution

    Hi, I decided to ask a question which I've wondered about for a while: is it possible to display a different website according to the browser's screen resolution? For example, is it possible that in the body onload you put a code, and then you have all three different websites listed in the file, and the code analyzes the screen resolution, then chooses the appropriate website?

    In my situation, I can't have a screen which pops up and asks for the resolution - it just wouldn't work. So, is it possible?

    Thanks in advance

    Todd

  2. #2
    Join Date
    Aug 2005
    Location
    The Hill Ch' Hill
    Posts
    381
    You can check the screen width of the viewing user by using screen.width
    so to change the webpage for someone viewing a 800x600 resolution monitor you can do the following:
    if (screen.width <= 800) window.location.href='if800.html';
    Change if800.html to whatever you want.

  3. #3
    Join Date
    Feb 2005
    Posts
    74
    Okay, so where would that go in the original file? I have to have the coding in the first .html file, so that it will open a second, alternate page if necessary. Would that code go in the head or the body of the page?

    Thanks for your help.

  4. #4
    Join Date
    Feb 2005
    Posts
    74
    So, where would I put that code?

  5. #5
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    You can put that code in either the BODY or HEAD tag. I'd suggest making the page read as follows, if you were to take tabzter's approach:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
    <html dir="ltr" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title></title>
    </head>
    <body>
    <p>
    <script type="text/javascript"><!--
    if (screen.width <= 800) window.location.href='if800.html';
    //--></script><noscript>
    Please enable javascript to view this webpage correctly!
    </noscript>
    </body>
    </html>
    However, since redirection can be a pain in the you-know-where, I'd suggest using a seperate JS file for the contents that will be written to the page.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
    <html dir="ltr" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title></title>
    </head>
    <body>
    <p>
    <script type="text/javascript"><!--
    var scriptUrl;
    if (screen.width <= 800)scriptURL="if800.js";
    else if (screen.width <= 1024)scriptURL="if1024.js";
    else if (screen.width <= 1152)scriptURL="if1152.js";
    else if (screen.width <= 1280 && screen.width <= 768)scriptURL="if1280by768.js";
    else if (screen.width <= 1280 && screen.width <= 960)scriptURL="if1280by960.js";
    else if (screen.width <= 1280 && screen.width <= 1024)scriptURL="if1280by1024.js";
    else scriptURL="else1600.js";
    document.write("<script type=\"text\/javascript\" src=\""+scriptUrl+"\"><\/script>")
    //--></script><noscript>
    Please enable javascript to view this webpage correctly!
    <br>
    (Default resolution page goes here)
    </noscript>
    </body>
    </html>

  6. #6
    Join Date
    Feb 2005
    Posts
    74
    Okay, thanks guys! I'll try it out.

  7. #7
    Join Date
    Aug 2005
    Location
    The Hill Ch' Hill
    Posts
    381
    Just a typo by ultimater:

    else if (screen.width <= 1280 && screen.width <= 768)scriptURL="if1280by768.js";
    else if (screen.width <= 1280 && screen.width <= 960)scriptURL="if1280by960.js";
    else if (screen.width <= 1280 && screen.width <= 1024)scriptURL="if1280by1024.js";

    should be

    else if (screen.width <= 1280 && screen.height <= 768)scriptURL="if1280by768.js";
    else if (screen.width <= 1280 && screen.height <= 960)scriptURL="if1280by960.js";
    else if (screen.width <= 1280 && screen.height <= 1024)scriptURL="if1280by1024.js";

  8. #8
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887

  9. #9
    Join Date
    Jul 2003
    Location
    Boston Area, Massachusetts
    Posts
    3,489
    In this day-and-age, when we have things like CSS at our disposal, there really isn't a need to design resolution-specific layouts. In fact, it is frowned upon. You are only dancing around the problem. If you actually want to solve the problem, learn how to create a fluid layout using CSS and semantic (read: meaningful) markup. An accessible site is typically not only easier to design, but easier to maintain. Please look into the following sites:

    http://csszengarden.com/
    http://bluerobot.com/
    http://glish.com/css/

    That should be a decent starting point. You should also note that users without JavaScript will not be redirected to your "preferred" site layout for their resolution. If you need any further help after tinkering around with the layouts and information provided above, please post back.
    Moderator @ WebDeveloper.com

  10. #10
    Join Date
    May 2010
    Posts
    11

    Has it worked

    I have this problem my site works fine in ie not firefox and not in either on small monitors.I was wondering if someone knew how i could fix this please and thanks

  11. #11
    Join Date
    Mar 2013
    Posts
    1
    I have face this problem but i could not find solve this prolem.

    .....................
    drane

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles