Member Avatar for chicago1985

I am trying to create a page where it will look the same if the screen is resolution 1024 x 768 or if the screen is resolution 800 x 600.

The below finds the resolution but the page looks different depending on the resolution. Please advise how I can make a web page look the same no matter what the resolution?

<script>
if ((screen.width>=1024) && (screen.height>=768)) 
{ 
divWidth = 1024;
divHeight = 768 ;
document.write("high res 1024");
} 
else 
{ 
divWidth = 1024;
divHeight = 768 ;
document.write("low res 800");
}
</script>
</head>

<body>
<table width=100%>
<tr>
<td><font size=+4>
long scroll test where the page will scroll different width depending on resolution.....
</font>
</td>
</tr>
</table>
</body>
</html>

In my above example the page width scrolling changes depending on resolution. I want it to be the same if either resolution is used.

  • 6 Contributors
  • 6 Replies
  • 211 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by ITGuys!
Member Avatar for MidiMagic

No. That requires a reboot of the computer with the resolution change.

If you can, define everything in inches or percent width/height.

Don't expect images to resize.

Member Avatar for victoriafroud

Hi there, I have this same problem. I have a site that obviously has a different screen resolution to some computer out there and I find it annoying that my site can't be viewed by some as it should be. Anyone know if there is a way of changing the code or something on the market that could resolve this? With thanks Vicky.

Member Avatar for mschroeder

Manipulating the user's screen in anyway is something that should be avoided at all costs. Imagine you were to visit a site, that has a layout designed for 640 x 480, but instead of showing you the whitespace they hijacked your browser window and shrunk the display down to a little box in the middle of your great big monitor...

My suggestion would be to review your site statistics, i mean you do have a good understanding of what your users are actually using right? In case you don't, here is a great example (http://www.w3schools.com/browsers/browsers_display.asp) Based off of those results cater to the greatest percentage of your users. Only after you have satisfied your largest user base should you explore the options to display your site to a smaller audience. If they have to scroll on your site there is a good chance they have to scroll on lots of others too.

Some of the options would be using javascript to detect the resolution and then send them to a url with a parameter that PHP/ASP etc would pickup and then serve a template to the user that better satisfies their demand. The site could also be designed that it recognizes mobile browsers and instead serves up a mobile template etc. This is where template engines shine, when there is a need to show the same content in an infinite number of configurations.

Lately I have seen 960px fixed width layouts popping up like crazy. Probably because 960 can be divided by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480.

But you don't have to take my word for it. Check out the 960 Grid System

Member Avatar for ITGuys!

I have found that you can not change the actual screen resolution of the viewing computer. However you can control the size of your site simply by placing everything in a <div> tag:

<html>
<head>
<title>example</title>
</head>
<body>
<center>
<div style="width:800px height:100%>
THE
       REST
                OF
                     YOUR
                               CONTENT
</div>
</body>
</html>

By doing this you guarantee that the width of your content is never greater than 800px but it will still dynamically adjust the height. If you are going to be using a css then be sure to give the <div> a class attribute. I generally use <div class="container">

Member Avatar for almostbob

have you examined elements sized in ems and %, per W3C recommendations,
to produce pages that do self adjust to window
px are not best practice

Member Avatar for ITGuys!

have you examined elements sized in ems and %, per W3C recommendations,
to produce pages that do self adjust to window
px are not best practice

That is correct. However when building a Static width, unless you understand what an Em value is and does I would suggest using px for your container div.

If you are interested in figuring out the Em value and how to use it check this out:
http://www.astahost.com/info.php/Sizes-Webdesign-Em-Px_t8926.html

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.