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

【问题标题】：How to make a scrolling website mobile friendly?如何使滚动网站移动友好？
【发布时间】：2023-03-15 05:16:01
【问题描述】：

我制作了这个website，它在 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，但这会使问题变得更糟。

【问题讨论】：

+1 手机截图
也许您应该为此使用 JQuery mobile。
好的，干杯@Viper我会看看！
jquerymobile.com 用它构建了一些令人印象深刻的网站。

标签： javascript html css margin

【解决方案1】：

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

你应该看看 css 的媒体查询，可能有不同的手机内容宽度，所以左右仍然会有边距。

例子

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

}

【讨论】：

啊，我明白你的意思了！将其从 px 更改为 % 的工作？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：