1
我正在努力使我的pet project web app响应，但我无法让页面在移动浏览器中正确显示。我的页面基本上是作为一个容器div，标题，导航栏（从桌面移动到移动时从侧面移动到顶部）和一个主要内容div构建的，并且都按预期行事，直到我在iPhone上进行测试为止Safari和Firefox） - 页眉和导航栏显示正常，但内容div太大，打破了页面。 Here are some screenshots to show you what I mean（iPhone/Safari默认缩放，iPhone缩小显示整个页面，以及Firefox中的等效窗口大小）。令人困惑的是，这似乎只影响主内容div（.list），因为标题和导航栏仍然以预期的大小显示，但我很难看到代码中的任何内容以使其行为正常不同。Div在响应页面中忽略移动浏览器中的视口大小
相关HTML：
<!DOCTYPE html>
<html>
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
...
</head>
<body>
<div id="container">
<div id="logoheader"><h1>...</h1><h2>...</h2></div>
<div class="buttonbar">...</div>
<div class="list">
<h3>...</h3>
<div class="maintable">
...
...
</div>
</div>
</div>
</body>
</html>
相关CSS：
body {
height: 100%;
width: 100%;
}
#container {
position: relative;
top: 0;
margin: 0 auto 10px auto;
width: auto;
max-width: 1250px;
min-height: 600px;
white-space: nowrap;
}
#logoheader {
width: auto;
min-width: 888px;
height: auto;
display: block;
}
.buttonbar {
position: absolute;
left: 18px;
width: 90px;
display: inline-block;
}
.list {
position: absolute;
left: 108px;
right: 20px;
min-height: 490px;
min-width: 750px;
display: block;
vertical-align: top;
white-space: normal;
}
.maintable {
font-size: .875rem;
width: auto;
min-height: 406px;
}
@media screen and (max-width: 600px) {
#container {
max-width: auto;
min-height: auto;
}
#logoheader {
min-width: auto;
width: 100%;
height: 40px;
}
.buttonbar {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
}
.list {
position: relative;
left: 0;
right: 0;
min-height: auto;
min-width: auto;
width: 100%;
}
.nontable {
min-height: auto;
}
}
我只是想知道，为什么你不希望使用而不是施加位置花车.buttonbar和.list都是绝对的？ –
没有特别的理由（除此之外，这是我制作的第一个网站，当时我很害怕花车）。幸运的是，就我所知，这些部件正常工作。 – csihar