一千萬個為什麽

搜索

kindle fire @media

我正試圖設計一個電子郵件,它在原生Kindle Fire電子郵件客戶端中呈現出獨特的效果。我可以使用以下媒體查詢在初始水平視圖中拾取:

@media only screen and (min-device-width: 590px) and (max-device-width:1014px){
/*kindle*/
    #desktop { display:none}
    #kindle { display:block !important}
}                           

...

<div class="mobile" id="kindle" style="display:none">Kindle Fire</div>
<div id="desktop">This is the desktop view</div>

問題是,當我將設備旋轉到橫向時,媒體查詢丟失,當我旋轉它時,它仍然丟失。我曾嘗試使用方向性條件語句,但似乎根本不起作用。任何人有任何建議?

最佳答案

對於基於方向的CSS,只需使用最小寬度或最小高度。不要使用“設備”。那就是讓你興奮起來。設備查詢不檢測方向更改。

轉載註明原文: kindle fire @media