我正在为本地公司使用PhoneGap构建一个基本的Web应用程序.我已经为应用程序顶部的标题/横幅创建了两个图像.一个针对纵向方向进行了优化,一个针对景观进行了优化.
我希望能够根据设备的持有方式显示其中一个.我一直在阅读有关媒体查询的内容,坦率地说,它有点过于复杂以满足我的需求,因为 JQuery mobile将为我完成剩余的功能,而我只使用一个CSS用于整个应用程序.
我希望能够根据设备的持有方式显示其中一个.我一直在阅读有关媒体查询的内容,坦率地说,它有点过于复杂以满足我的需求,因为 JQuery mobile将为我完成剩余的功能,而我只使用一个CSS用于整个应用程序.
解决方法
您可以将CSS媒体查询用于纵向和横向方向,它并不复杂：
@media screen and (orientation: portrait) { ... }
@media screen and (orientation: landscape) { ... }
使用这些媒体查询,您可以覆盖任何方向的背景图像.
官方文件：http://www.w3.org/TR/css3-mediaqueries/#orientation
有两种使用方法：
假设你有< div>使用类标题：
@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; }
}
