Div在響應頁面中忽略移動瀏覽器中的視口大小

我正在努力使我的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; 
    } 
}

來源

2013-07-04 csihar

我只是想知道，爲什麼你不希望使用而不是施加位置花車.buttonbar和.list都是絕對的？ –

沒有特別的理由（除此之外，這是我製作的第一個網站，當時我很害怕花車）。幸運的是，就我所知，這些部件正常工作。 – csihar

在你的CSS樣式爲.list

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

刪除min-width:750px和你去好:)

來源

2013-07-04 08:52:40

工作，謝謝！我還發現了一堆圍繞佈局的其他最小寬度，並將它們設置爲0或100％，而不是自動解決我的問題。 – csihar

很高興它有幫助。從上面的代碼，你告訴最小寬度是750px。因此，如果您的設備的屏幕寬度爲320像素，則列表容器將不會是320像素寬度，而會保持爲750像素寬度 –

只需添加display:inline到您的媒體查詢的.list！

我響應佈局進行了測試：

enter image description here

正如你所看到的縱向佈局具有display: inline和景觀不，只是向你示區別！

來源

2013-07-04 08:48:23 designtocode

我將Qiqi的答案標記爲正確，但自從'display：inline'從盒子中刪除所有尺寸，包括給我帶來麻煩的最小寬度，這也起作用。謝謝！ – csihar

Div在響應頁面中忽略移動瀏覽器中的視口大小

回答

相關問題