媒體查詢不能在任何手機上工作

我已經研究過這個問題遍佈整個stackoverflow，我仍然無法解決它。請幫助，如果你可以:)媒體查詢不能在任何手機上工作

我使用wordpress主題孵化，其中包括一個媒體查詢，似乎並沒有影響任何iphones（4或5）。

下面是HTML中的視口聲明，我使用：

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

我也嘗試了媒體查詢，我能想到的每一個變化。目前，我使用：

@media only screen and (max-width: 480px) and (orientation:portrait) { 

    .wrap { 
    max-width: 300px; 
    border: 1px solid red; 
    } 
}

我也試過無濟於事：

@media only screen and (max-device width: 480px) and (orientation:portrait) { 

    .wrap { 
    max-width: 300px; 
    border: 1px solid red; 
    } 
}

在此先感謝任何人誰可以幫助這一點。

來源

2014-05-02 Lisa S

它可能被覆蓋。你有鏈接到違規網站？我可以快速查看 – Vector

我可能是錯的，但是'initial-scale = 1'沒有將它設置爲頁面的正常寬度（就像你會在桌面上查看它一樣），因此永遠不會達到480px的寬度？ –

嗨矢量 - 不知道我回應我應該的方式，但該網站是http://www.lsussman.com/illustration/。謝謝！ –

嘗試在potrait模式

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) <-- 568px for iphone 5, 480px for iphone 4 --> 
and (orientation : portrait) { 
    /* STYLES GO HERE */ 
}

使用這些

縱向&景觀

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
    /* STYLES GO HERE */ 
}

來源

2014-05-02 18:40:23 4dgaurav

嗨Gaurav，謝謝你的建議，但沒有骰子。這是最古怪的事情！ –

最奇怪的事情？ – 4dgaurav

只是，它不會工作，我的意思是。它似乎應該！ –

哦男人我是一個叮咚！問題在於媒體查詢上方的CSS代碼中存在不匹配的{}。教訓：當沒有任何工作像它應該，它沒有任何意義，它幾乎總是在代碼中的某個地方小。有時候好吧。

感謝大家的幫助！

來源

2014-05-02 19:47:09

媒體查詢不能在任何手機上工作

回答

相關問題