css – 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,只需使用最小宽度或最小高度.不要使用“设备”.这就是你的想法.设备查询不会检测方向更改.