0

我创建了一个页面，它在桌面上运行良好，但在移动浏览器中却一团糟。

在此处输入图像描述

这是手机版。我有一个 header和一个.container（灰色背景的）设置为宽度 100%。在 .container 里面，我.wrapper设置了width: 900px;和.container margin: 0 auto;。为什么蓝色背景和灰色背景渲染到页面宽度的一半左右？我可以解决问题以在移动设备上创建类似于桌面版本的页面的最佳方法是什么？

4

3 回答 3

1

我相信您的包装器可能会导致问题。而不是为对象设置固定宽度：

.wrapper {
    max-width:900px;
    width:100%;
    display:block; //for centering
    margin:0 auto // for centering

}

应该解决您的问题并使网站在不同平台上的响应速度更快。祝你好运！:)

笔记

如果您还没有这样做，请接受rajkumar 的评论并添加：

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2013-10-02T23:25:55.603 回答
0

这是你的wrapper宽度li。将它们设置为百分比。

.wrapper {
    width: 90%;
    margin: 0 auto;
 }

 li {
    width: 30%;
    ....
 }
于 2013-10-02T02:42:21.713 回答
0

如果您想为台式机和移动设备创建一个站点..尝试以百分比表示所有宽度。因为百分比仅根据屏幕分辨率自动适应宽度。假设您以像素为单位给出屏幕在所有屏幕分辨率下都不能调整。它只能根据仅限您的尺寸。在您的情况下，请确保所有宽度的百分比。并且请在标题部分符合媒体类型以获取屏幕宽度

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2013-10-02T02:54:06.657 回答