javascript - 如何使滚动网站移动友好？

Question

我做了这个website它在 Internet Explorer、Firefox 和 Chrome 上运行良好。但是当我尝试通过我的手机访问它时，它似乎摆脱了所有扰乱网站布局的边距

这是它在浏览器上的样子(我希望它在手机上看起来像，或者至少与某种边距相似!):

这是我使用 Samsung Galaxy 查看网站时得到的 View (如您所见，它已经删除了侧边距):

这是内容区域(阴影矩形)的 css 代码:

.content {
    width:800px;
    height:auto;
    margin:6% auto;    //I think it is to do with this
    position:relative;
    background-color:black;
    opacity: 0.75;
    -moz-border-radius-bottomright: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    -moz-border-radius-bottomleft: 10px 10px;
    border-bottom-left-radius: 10px 10px;
    -moz-border-radius-topright: 10px 10px;
    border-top-right-radius: 10px 10px;
    -moz-border-radius-topleft: 10px 10px;
    border-top-left-radius: 10px 10px;
    padding:25px;
    vertical-align: middle;
}

知道如何解决这个问题吗？我曾尝试将其更改为 px，但这会使问题变得更糟。

Answer 1

问题可能是您的内容固定为 800 像素，因此如果您的手机屏幕约为 800 像素，则两侧将没有任何空间。

你应该看看 media queries for css 并且可能有不同的手机内容宽度，所以左边和右边仍然会有边距。

例子

@media only screen and (max-width: 767px) {
.content {
width:500px;
margin: 6% auto;
}

}