3

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

这就是它在浏览器上的样子（我希望它在手机上看起来像，或者至少与某种边距相似！）：

在计算机浏览器中查看

这是我在使用三星 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 但这会使问题变得更糟。

4

3 回答 3

3

问题可能是您的内容固定为 800 像素，因此如果您的手机屏幕约为 800 像素，则侧面不会留下任何空间。

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

例子

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

}
于 2013-07-13T18:25:01.770 回答
2

正如上面的答案所提到的 - 你需要使用@media

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

于 2013-07-13T18:30:33.423 回答
0

这是一个视口问题。您不需要更改 CSS。在此处阅读视口：

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

于 2013-07-13T21:10:05.147 回答