我做了这个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,但这会使问题变得更糟。
最佳答案
问题可能是您的内容固定为 800 像素,因此如果您的手机屏幕约为 800 像素,则两侧将没有任何空间。
你应该看看 media queries for css 并且可能有不同的手机内容宽度,所以左边和右边仍然会有边距。
例子
@media only screen and (max-width: 767px) {
.content {
width:500px;
margin: 6% auto;
}
}
关于javascript - 如何使滚动网站移动友好?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17632947/