kindle fire @media

Question

我正在尝试设计一封电子邮件，在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>

问题在于当我将设备旋转到横屏时，媒体查询会丢失，并且当我将设备转回纵向时，媒体查询仍然保持丢失状态。我尝试使用方向条件语句，但似乎根本不起作用。有人有任何建议吗？

- marcy23

Answer 1

如果需要基于方向的CSS，请使用min-width或min-height。不要使用“device”。这会导致问题。设备查询无法检测方向更改。

- Josh utley

Answer 2

这对于横屏视图对我来说似乎有效，但我还没有针对其他平板设备进行过检查。

/** Kindle Fire Landscape **/
@media only screen and (min-device-width : 600px) and (max-device-width: 1280px) {

}

- Michael Barton