Question

我已经制作了非常基本的页面，这里是HTML代码：

<!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>

只需一个简单的#Canvas div来保存内容，然后是一个#SiteHeader div，周围有一个边框。这是一个链接：

问题：当在Windows 8 RT平板电脑上的浏览器（如IE 11）中查看此页面时，该页面不适合屏幕。当我说合适时，我的意思是它应该缩小，以便我可以看到整个页面。我必须水平滚动才能看到整个页面。

我尝试使用<meta name="viewport" content="width=1400"/>，这似乎适用于Android，但不适用于Windows 8 Metro应用中的IE。

即使屏幕的分辨率不是那么宽，我也希望屏幕上显示完整的1400px宽度。它只需要加载缩小，但由于某种原因，这个页面没有。请问有谁可以提出建议？

Answer 1

您需要使用这种方式，这样无论页面大小如何，视口都不会改变。

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

但在这种情况下，小型设备中会有滚动条。亲自尝试一下。

Answer 2

好的，我想我已经明白了。

虽然这些其他网站的包装div确实远远超过了大多数设备的宽度，但实际内容却在一个小于1080px宽的div内。

我的Windows 8平板电脑的分辨率为 1920x1200 。因此，当我旋转以纵向模式（显示宽度为1200像素）进行查看时，看起来好像网站缩小（或缩小了）以适应，但事实并非如此。它只是包装div中的额外背景细节已被切断，但内容仍然适合我的设备的纵向宽度1080px。

如果我的平板电脑具有较低的原始分辨率（例如1024x768），则即使是宽度为960像素的网站也会在纵向模式下被切断。

最后，也许最重要的是，提供背景的任何div都不能具有不灵活的宽度设置。基本上，始终将CSS属性设置为max-width: 1200px;而不是width: 1200px。这意味着在较小的屏幕上，它将折叠到内部内容div的宽度。

为什么此页面无法正确显示在屏幕上？

2 个答案: