Question

我的网站需要大量的屏幕空间才能发挥作用。工作正常的最小宽度约为1200像素。问题是，当它在分辨率较低的屏幕（iPhone或旧计算机）上打开时，页面不能完全适合屏幕，而是在左侧切割。

有没有人知道我能做什么而不是只能滚动？

我在整个页面使用CSS图层

#page {
position:absolute;
left:50%;
width:1200px;
margin-left:-600px; 
}

然后在这个图层中我有实际的内容：

#content {
width:1200px;
text-align: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
color: #aaaaaa;
clear:both; 
margin-top:40px;
}

据我所知，可能原因是margin-left：-600px设置但是如何确保整个内容块居中？或者我只需要将它对齐到左侧？

任何帮助将不胜感激！

PS - 该网站位于http://textexture.com，这是我使用的CSS：http://textexture.com/templates/styles.css

谢谢！

Answer 1

请改为尝试：

#page {
    width: 1200px;
    margin: 0 auto;
}

#content {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #aaaaaa;
    clear:both; 
    margin-top:40px;
}

绝对定位带有复杂性，只有在实际需要时才应该使用。

此外，似乎没有理由拥有单独的#page和#content div。请尝试删除#page并对其进行梳理：

#content {
    width: 1200px;
    margin: 0 auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #aaaaaa;
    clear:both; 
    margin-top:40px;
}

Answer 2

如果您希望分辨率较小的用户能够使用您的网站，那么您应该做到这一点，以便在较低的分辨率下工作。有一些技巧可以做到这一点。您链接到的网站看起来非常简单，所以改变您的一些样式不应该太棘手。

您可能希望查看响应式Web设计并在CSS中使用媒体查询。

Answer 3

你也可以像这样使用％。

#page {
    width: 100%;
    margin: 0 auto;
}

#content {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #aaaaaa;
    clear:both; 
    margin-top:40px;
}

Answer 4

“网站不适合您的窗口大小”-此问题的主要原因是在您的 css 文件中使用了 min-width 或 max-width 属性，检查并尝试删除任何不需要的 min、max-width 或 height属性

网站不适合浏览器窗口

4 个答案: