根据设备方向更改图片

Question

我正在使用PhoneGap为一家本地公司构建基本的Web应用程序。我已经创建了两个图像，用于应用程序顶部的标题/横幅。一个图像针对纵向方向进行了优化，另一个图像则针对横向方向进行了优化。 我想根据设备的持有方式显示其中之一。我一直在阅读有关媒体查询的文章，老实说，这对我的需求来说有点过于复杂，因为JQuery mobile将为我处理其余功能，并且我仅在整个应用程序中使用一个CSS。

是否有人可以提供几行简单的代码来帮助解决此问题？

- user1942412

Answer 1

您可以使用CSS媒体查询来适应横向和纵向布局，这并不复杂：

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

使用这些媒体查询，您可以在任何方向上覆盖background-image。

官方文档：http://www.w3.org/TR/css3-mediaqueries/#orientation 有两种使用方法：

假设您有一个类名为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; }
}

- keaukraine

---

那么假设我有两个图片文件image1.jpg和image2.jpg，我该如何用上述代码处理这些文件呢？ - user1942412

这可能会引起一些问题： 在 Nexus 7 上，如果键盘显示，屏幕会从竖屏切换到横屏。 - Christian Kuetbach

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);
}

- Osserspe

---

谢谢，那么我该如何在我的HTML中调用这些图片呢？ - user1942412

最小和最大宽度并不能精确地确定方向。此外，320像素只适用于iPhone屏幕。 - keaukraine

@keaukraine 是的，使用横向和纵向可能更好。 - Osserspe

@user1942412 将这些声明添加到您的CSS文件中。上传图像并将路径指向它们。在我的示例中，我假设CSS文件和图像位于同一个文件夹中。如果您例如将图像放在外面，在另一个文件夹中：images/portrait.png和images/landscape.png，则可以使用此路径background-image: url(images/landscape.png);。这会对您有帮助吗？请注意，@keaukraine还给出了一个很好的示例，说明如何通过<img ... />包含图像来解决问题。 - Osserspe