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

Question

我已将其设为website，它可以在Internet Explorer，Firefox和Chrome上正常运行。 但当我尝试通过我的手机访问它时，似乎摆脱了搞乱网站布局的所有边缘

这就是它在浏览器上的样子（我希望它在手机上看起来像或者至少类似于某种保证金！）：

这是我在使用Samsung Galaxy查看网站时获得的视图（正如您所看到的，它已删除了边距）：

这是我的内容区域的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

问题可能是您的内容固定为800px，因此如果您的手机屏幕大约为800px，那么两侧不会留下任何空间。

您应该查看css的媒体查询，并且手机的内容宽度可能不同，因此左侧和右侧仍会留有余量。

实施例

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

}

Answer 2

如上所述，你需要使用@media

Meida查询是这样的 - 这里有一些尺寸 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

这是一个视口问题。您无需更改CSS。在这里阅读视口：

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/