將設備從縱向更改爲橫向時，媒體查詢不會提取新的瀏覽器大小

我正嘗試創建一個「響應式」網站。我找到了一個名爲「resizemybrowser.com」的工具，告訴你瀏覽器的大小。我一直在我的CSS中使用這些信息進行媒體查詢。將設備從縱向更改爲橫向時，媒體查詢不會提取新的瀏覽器大小

有什麼好奇的是，當我導航到這個網站時，瀏覽器寬度不會改變，當我從縱向旋轉我的設備到風景。高度屬性顯示不同的值，但寬度始終爲980px，我不明白爲什麼。

謝謝。

編輯1：

我也試着玩的「外部」的網絡工具「resizemybrowser.com」設置。現在，它確實爲縱向顯示不同的尺寸，而不是橫向模式。它在我的銀河系s3上返回720，縱向返回1280px。但是，當我使用這些值測試我的媒體查詢時，它仍然爲橫向和縱向提取720px的媒體查詢。這裏的CSS：

@media only screen and (max-width: 720px) {   
.hero-unit { 
    background: url("../img/1.jpg") 100% 100% no-repeat; 
background-size: contain; 
width: 20em; 
height: 10em; 
padding:0px; 
    } 

    @media only screen and (min-width:721px) and (max-width: 1280px) {   
.hero-unit { 
    background: url("../img/2.jpg") 100% 100% no-repeat; 
background-size: contain; 
width: 26em; 
height: 10em; 
padding:0px; 
    } 

     h2 { 
    font-size: 1.8em; 
    line-height: 1em; 
}

}

EDIT 2

我試着將我的下面一行代碼，但它並沒有發揮作用。

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />'

來源

2012-11-09 dot

我認爲你需要添加

<meta name="viewport" content="width = device-width">

比較結果with這個標籤和without，見媒體查詢。在我的設備上，它完全按照您的需要工作。

來源

2012-11-09 19:20:33 matshch

嘿。我嘗試了addnig ...也不起作用。我一直在測試iPhone 5和三星Galaxy S3。相同的結果。 – dot

嗨，你終於搞定了嗎？我有同樣的問題。添加meta標籤只會改變頁面，當我刷新頁面時，它會檢測到正確的寬度。但它需要刷新，所以它不是一個解決方案。 – Rob

將設備從縱向更改爲橫向時，媒體查詢不會提取新的瀏覽器大小

回答

相關問題