根据设备方向更改图像

Question

我正在为一家本地公司使用 PhoneGap 构建一个基本的网络应用程序。我为应用程序顶部的标题/横幅创建了两个图像。一种针对纵向进行了优化，一种针对横向进行了优化。 我希望能够根据设备的握持方式显示其中一个。我一直在阅读有关媒体查询的内容，坦率地说，它对于我的需求来说有点过于复杂，因为 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; }
}

Answer 2

这是关于如何使用媒体查询的答案，这是解决问题的一种非常简单的方法。但是一个先决条件是可以将图像显示为 css 背景，而不是 <img ... />

伪代码

.my-banner {
  ...declarations like:
  background-position: 
  border: 
  margin: 
  padding: 
}
@media all and (max-width: 320px) {
  .my-banner {
  background-image: url(portrait.png);
}
@media all and (min-width: 321px) {
  .my-banner {
  background-image: url(landscape.png);
}