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

时间:2012-01-16 15:15:00

标签: javascript jquery ios image device-orientation

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

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

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

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

任何帮助都非常感激。

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

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