在响应式页面中忽略移动浏览器中的视口大小

时间：2013-07-04 08:19:13

标签： html css mobile responsive-design media-queries

我正在努力使我的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），因为标题和导航栏仍然以预期的大小显示，但我很难看到代码中的任何内容让它表现得与众不同。

相关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;
   }
}

2 个答案:

答案 0 :(得分：1)

在.list

的CSS样式中 
.list {
    position: absolute;
    left: 108px;
    right: 20px;
    min-height: 490px;
    min-width:750px;
    display: block;
    vertical-align: top;
    white-space: normal;
}

删除min-width:750px，你就可以了：）

答案 1 :(得分：0)

只需将display:inline添加到.list的媒体查询中！

我在响应式布局中测试了它：

enter image description here

正如您所看到的，纵向布局有display: inline且景观没有，只是为了向您展示差异！

相关问题
最新问题