媒體查詢不適用於iPhone或Android，未完全在桌面上工作

我試圖設計一個網站，根據用戶的設備來響應地顯示桌面版本或移動版本。我更喜歡使用響應式CSS來做到這一點，而不是使用移動重定向。媒體查詢不適用於iPhone或Android，未完全在桌面上工作

有問題的網站是http://www.raceweekend.com。當瀏覽器窗口的尺寸調整爲移動寬度，以下是應該發生：

水平菜單應紅色的矩形塊成爲垂直
旋轉圖像應該消失
標誌應成爲中心在頂部
日期（旁邊的標誌）應該消失

CSS的行爲到底我希望它在這兩個IE9和Firefox。當我調整窗口的尺寸時，所有上述項目都會發生。

在手機上，它只顯示常規瀏覽器版本;上述項目都沒有發生。我在iPhone 4和三星Galaxy Nexus上測試過。

這裏是我的媒體查詢代碼：

@media handheld, screen and (max-width: 480px) { 
#nav-bar { 
    display:none; 
} 

#header { 
    height:auto !important; 
    width:100% !important; 
} 

#nav { 
    height:auto !important; 
} 

.main-nav li { 
    float:none !important; 
    clear:both; 
    background-color:#cf171f; 
    margin-bottom:1px !important; 
    padding:0 !important; 
} 

.main-nav li a{ 
    display:block; 
    padding:10px 18px; 
} 

.main-nav li a:hover{ 
    background-color:#be161d; 
    color:#ffffff !important; 
} 

#date { 
    display:none; 
} 

#race-logo { 
    width: 100% !important; 
} 

.center { 
    margin: 0px auto; 
    display: block; 
} 

#content, #content-sliders { 
    margin-left:5% !important; 
    width: 90% !important; 
    padding-top:20px !important; 
} 

#footer { 
    font-size:14px !important; 
    line-height:1.5em; 
} 

}

來源

2013-02-12 Julia Spangler

嘗試使用meta標籤，迫使手機瀏覽器報告它的實際寬度：

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

您也可以禁用變焦時，如果你已經有了一個適當的響應式設計：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

來源

2013-02-12 20:34:50

謝謝！完美工作！ – 2013-02-13 21:47:34

您需要添加視口meta標記您的HTML：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

默認情況下，iPhone將在事實上使網站as if its viewport were 980px wide，然後按比例縮小到適合其實際寬度。這是因爲iPhone的真實視口寬度是480px（在iPhone 3GS或更早版本上爲480px，或者在雙分辨率iPhone 4視網膜顯示器上爲「邏輯」480px），所以如果它沒有這樣做， d只能看到您訪問過的每個網站的寬度爲480px。

困惑了嗎？在桌面瀏覽器上轉到NYTimes.com，然後將窗口大小調整爲480px。如果網站默認情況下未將其視口寬度報告爲980像素，則網站將在iPhone上呈現該圖像。

無論如何，這就是爲什麼你的媒體查詢不起作用。因此，添加上面的meta標籤會告訴iPhone將其寬度報告爲其實際寬度（480px），然後這將與您的媒體查詢中的條件相匹配。

來源

2013-02-12 21:21:40 daGUY

媒體查詢不適用於iPhone或Android，未完全在桌面上工作

回答

相關問題