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

我正在使用iOS杂志框架（PugPig）将HTML文档加载到WebKit支持的视图（无铬版本的Mobile Safari）中。根据设备方向使用JS或JQuery动态编辑img src

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

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

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

任何帮助非常感谢。

2012-01-16 MightyMeta

好的，毕竟，通过设置img的display属性，找到了一个使用CSS Media Queries的解决方案。一个软糖的位，但现在罚款。

基本上我创建了两个div，一个是'landscape'id，另一个是'portrait'，绝对彼此重叠。然后使用@media查询来显示/隐藏与display：属性相关的div。非常笨拙，完全不适合网页，但是iPad应用程序可以直接从内存中加载数据。而这是在“响应式图像”成为一件事之前。

来源

2012-02-04 16:31:40 MightyMeta

小心分享？这不是一个答案... – Lee 2015-09-15 12:34:20

这是一段时间以前，所以我没有代码交给。从记忆中：我创建了两个div，一个带有“横向”ID，另一个带有“纵向”，绝对彼此重叠。然后使用@media查询以display：属性显示/隐藏相关的div。非常笨拙，完全不适合网页，但是iPad应用程序可以直接从内存中加载数据。而这是在“响应式图像”成为一件事之前...... – MightyMeta 2015-09-16 08:56:23

你试过jQuery mobile的orientationchangeevents？

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

来源

2012-01-16 15:57:21 bububaba

谢谢，我会研究一下，会回应。 – MightyMeta 2012-01-16 17:28:01

谢谢bububaba，但发现了一个不同的解决方案。当然，我需要JQuery Mobile以及尽快提供它！ – MightyMeta 2012-02-04 16:32:15

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

回答

相关问题