Why doesn't this page fit onto a screen properly?

StackOverflow https://stackoverflow.com/questions/23594215

Question

I have made very basic page, here is the HTML code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<style>
#Canvas {
    width: 1400px;
    background-color: #09F;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
#SiteHeader {
    width: 1200px;
    background-color: #CCC;
    height: 165px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 15px;
    border: 5px solid #F0F;
}
</style>
</head>

<body>
<div id="Canvas">
  <div id="SiteHeader"> Why does this not fit in the screen? </div>
</div>
</body>
</html>

Just a simple #Canvas div to hold the content, and then a #SiteHeader div with a border around it. Here is a link to it:

The problem: When this page is viewed in a browser such as IE 11 on my Windows 8 RT tablet, the page does not fit the screen. When I say fit I mean that it should appear zoomed out so that I can see the entire page. I have to scroll horizontally to see the entire page.

I tried to use <meta name="viewport" content="width=1400"/> which seems to work for Android but not IE in Windows 8 Metro app.

I want the full 1400px width to appear on the screen even if the resolution of the screen is not that wide. It just needs to load zoomed-out but for some reason this page doesn't. Please can anyone suggest why?

Was it helpful?

Solution 2

Okay, I think I figured it out.

Although these other website do have wrapper divs which far exceed the width of most devices, the actual content is inside a div which is less than 1080px wide.

My Windows 8 tablet has a resolution of 1920x1200. So when I rotate to view in portrait mode (display width of 1200px), it appears as if the website has shrunk (or been zoomed out of) to fit, but its not. Its just the extra background detail in the wrapper div has been chopped off, but the content still fits in the portrait width of my device which is 1080px.

If my tablet had a lower native resolution say 1024x768, then even a 960px width website would get chopped off in portrait mode.

Finally, and maybe most importantly, any divs that provide a background must not have a width set that is not flexible. Basically, always set CSS attribute to max-width: 1200px; rather than width: 1200px. This means that on smaller screens it will collapse to the width of the inner content div.

OTHER TIPS

You need to use this way, so that whatever the page size is given, that won't be changed by the viewport.

<meta name="viewport" content="width=device-width, user-scalable=no">

But in this case, there will be scrollbars in the small devices. Try it out yourself.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top