根据设备方向更改图像

Question

我正在为本地公司使用PhoneGap构建一个基本的Web应用程序.我已经为应用程序顶部的标题/横幅创建了两个图像.一个针对纵向方向进行了优化,一个针对景观进行了优化.我希望能够根据设备的持有方式显示其中一个.我一直在阅读有关媒体查询的内容,坦率地说,它有点过于复杂以满足我的需求,因为JQuery mobile将为我完成剩余的功能,而我只使用一个CSS用于整个应用程序.

有没有人可以添加一些简单的代码来帮助解决这个问题？

Answer 1

您可以将CSS媒体查询用于纵向和横向方向,它并不复杂:

@media screen and (orientation: portrait) { ... }
@media screen and (orientation: landscape) { ... }

使用这些媒体查询,您可以覆盖background-image任何方向.

官方文件:http://www.w3.org/TR/css3-mediaqueries/#orientation

有两种使用方法:

假设你有<div>课header:

@media screen and (orientation: portrait)
{
    div.header { background-image:url(image1.jpg); }
}
@media screen and (orientation: landscape)
{
    div.header { background-image:url(image2.jpg); }
}

或者,您可能希望使用<img>标签.在这种情况下,您将需要其中两个,并且只使用CSS规则隐藏/显示一个.比方说,<img>标签分别有类header-land和header-portrait:

@media screen and (orientation: portrait)
{
    .header-land { display:none; }
    .header-portrait { display:inline-block; }
}
@media screen and (orientation: landscape)
{
    .header-land { display:inline-block; }
    .header-portrait { display:none; }
}