html - 如何禁用内容变小？

Question

我有一个页面，当我将浏览器窗口水平缩小时，内容也变得越来越小，我该如何解决这个问题？我只希望内容保持 100% 宽度，如果浏览器窗口很小，则显示水平滚动条。

可以看到HERE , 尝试缩小浏览器窗口。

我也尝试过将内容宽度设置为 1000 像素，但效果不如预期。

这是 CSS 代码:

body {
    background: url(http://i.imgur.com/UAq9egG.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: Arial;
}

.content {
    padding: 10px 10px;
    background: rgba(255,255,255,0.3);
    margin: 30px;
}

p {
    color: white;
}

这里还有 jsfiddle demo

Answer 1

将内容的宽度设置为 1000 像素，对我来说效果很好。

如果您打开开发人员工具并将内容类指定为 1000 像素，它会显示水平滚动条而不是拉伸(stretch)内容。