3

我正在尝试设计一个在本机 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>

问题是,当我将设备旋转到横向时,媒体查询会丢失,当我将其旋转回来时,它仍然会丢失。我尝试过使用方向条件语句,但这似乎根本不起作用。有人有什么建议吗?

4

2 回答 2

4

对于基于方向的 CSS,只需使用 min-width 或 min-height。不要使用“设备”。这就是让你兴奋的原因。设备查询不检测方向变化。

于 2013-02-15T18:14:28.880 回答
3

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

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

}
于 2012-04-06T16:11:05.467 回答