javascript - 使用 JS 或 JQuery 根据设备方向动态编辑 img src

Question

我正在使用一个 iOS 杂志框架 (PugPig)，它将 HTML 文档加载到 WebKit 驱动的视图（Mobile Safari 的无铬版本）中。

我希望每个“页面”根据设备的方向加载 <img/> 的纵向或横向版本。由于各种原因，它必须是 <img/> 而不是 CSS 背景图像，因此媒体查询不起作用。因为我是从本地设备加载 HTML，所以也不能使用 Web 服务器的东西。

所以我猜测 JS 是要走的路，但它需要动态检测方向变化（或至少是屏幕宽度），而不需要刷新页面，我不知道这是否可能。

对 JS 不太熟悉，因此没有示例代码（到目前为止，我所有的尝试都是车祸）。对不起。

非常感谢任何帮助。

score 1 · Accepted Answer

你尝试jQuery mobile过的orientationchange 活动吗？

我从来没有这样做过，但似乎你可以这样做。

score 0 · Accepted Answer

好的，毕竟通过设置 img 的 display 属性找到了使用 CSS Media Queries 的解决方案。有点软糖，但现在还好。

基本上我创建了两个 div，一个带有“风景”ID，另一个带有“肖像”，它们绝对位于彼此之上。然后使用@media查询来显示/隐藏具有 display: 属性的相关 div。非常笨拙，根本不适合网络，但对于直接从内存加载数据的 iPad 应用程序来说还可以。这是在“响应式图像”成为事物之前。

2 回答 2