Question

我在移动设备上将网站与中心对齐时遇到了问题 - 它目前保持一致。

可以查看该网站here ^†。

我查看过this个问题，但没有帮助;当<meta name="viewport" content="width=device-width, maximum-scale=1.0" />对齐不变时。保证金设置为0 auto，但问题仍然存在。

<小时/> ^†网站不再存在，链接已更改为Internet Archive但CSS未保留。

Answer 1

您使用固定宽度：

#unfloated-container{
    width: 1000px;
}

您可以使用“CSS媒体查询”（尝试谷歌搜索）为较小的屏幕设置不同的大小，并保持您选择的屏幕的当前大小。

在较小的屏幕中查看页面时，您可能还需要设置不同的边距（甚至更多不同的设置）！

编辑1：我从其他答案中发表评论，复制这些评论以描述为特定屏幕尺寸更改浮动，宽度和所有其他所需设置（样式）的可能性：

似乎HTC试图适应浏览器以避免水平滚动。但问题仍然存在于你的CSS中，所以尝试css媒体查询（如我的回答中所提出的）似乎更好，并且只调整移动设备的样式！这样你就可以删除浮点数（float：none），将宽度设置为“width：auto”并在需要的地方调整边距！

Answer 2

我相信这样可以更好地解决您的对齐问题，但横幅图片仍然有点像原始链接中那样混乱：

#unfloated-container{
margin: -600px auto 0 auto;
padding: 0;
width: 80%;
height: 100%;
}

#container{
margin: 0;
padding: 0 0 0 0;
width: 100%;
}

/*~~~~~ Banner ~~~~~*/
#banner{
margin: 10px 0 0 0;
padding: 0 0 0 130px;
width: 100%;
height: 280px;
float: left;
text-align: center;
}
#banner-image{
margin: 10px 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 300px;
background-image: url(../images/banner.jpg);
background-repeat:repeat-x;
}
/*~~~~~~ Links Bar ~~~~~*/
#links{
margin: 300px 0 0 60px;
padding: 7px 0 0 5px;
width: 75%;
height: 100px;
font-size: 20;
}

/*~~~~ Content Area ~~~~*/
#content{
margin: 0px 0 0 0px;
padding: 104px 55px 0 80px;
height: 550px;
width: 865px;
float: left;
overflow: scroll;
overflow-x: auto;
overflow-y: auto;
}

Answer 3

您需要同时设置视口宽度（如您在问题中所建议的）和CSS属性。

要拥有移动设备响应式网站，您需要将所有css属性设置为百分比。例如，您当前将名为#unfloated-container的css属性设置为1000px。这意味着您的网站将始终为1000px宽。尝试将其更改为80％（或您需要的任何％）。

希望这有帮助！

网站在移动设备上查看时不对齐

3 个答案: