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

Question

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

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

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

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

任何帮助都非常感激。

Answer 1

您是否尝试jQuery mobile的{​​{1}} events？

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

Answer 2

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

基本上我创建了两个div，一个带有'landscape'id，另一个带有'portrait'，完全位于彼此之上。然后使用@media查询使用display：property显示/隐藏相关的div。非常笨拙，根本不适合网络，但可以直接从内存加载数据的iPad应用程序。这是在“响应式图像”成为一种东西之前。