使用JS或JQuery基于设备方向动态编辑img src

Question

我正在使用iOS杂志框架（PugPig），该框架将HTML文档加载到WebKit支持的视图（Mobile Safari的无边框版本）中。

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

因此，我猜想JS是可行的方法，但是它需要在不刷新页面的情况下即时检测方向变化（或至少是屏幕宽度），而且我不知道这样做是否可行。

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

任何帮助，不胜感激。

Answer 1

您是否尝试过jQuery mobile的orientationchange 事件 ？

我从没做过，但看来您可以这样做。

Answer 2

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

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