简体繁体 English

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

[英]Dynamically edit img src based on device orientation with JS or JQuery

原文 2012-01-16 15:15:00 1 2 javascript/ jquery/ ios/ image/ device-orientation

I am working with an iOS magazine framework (PugPig) which loads HTML documents into a WebKit powered view (a chromeless version of Mobile Safari). 我正在使用iOS杂志框架（PugPig），该框架将HTML文档加载到WebKit支持的视图（Mobile Safari的无边框版本）中。

I would like each 'page' to load either a portrait or landscape version of an <img/> depending on the orientation of the device. 我希望每个“页面”根据设备的方向加载<img />的纵向或横向版本。 For various reasons it has to be an <img/> rather than a CSS background image, so media queries won't work. 由于各种原因，它必须是<img />而不是CSS背景图片，因此媒体查询将无法工作。 Because I am loading HTML from the local device, no web server stuff can be used either. 因为我正在从本地设备加载HTML，所以也无法使用任何Web服务器。

So I am guessing that JS is the way to go, but it would need to detect orientation change (or at least screen width) on the fly, without a page refresh, and I don't know if this is possible. 因此，我猜想JS是可行的方法，但是它需要在不刷新页面的情况下即时检测方向变化（或至少是屏幕宽度），而且我不知道这样做是否可行。

Not hugely familiar with JS hence no sample code (all my attempts so far are car crashes). 对JS不太熟悉，因此没有示例代码（到目前为止，我所有的尝试都是车祸）。 Sorry. 抱歉。

Any help much appreciated. 任何帮助，不胜感激。

2 个解决方案

Did you try jQuery mobile 's orientationchange events ? 您是否尝试过jQuery mobile的orientationchange 事件？

I've never done this, but it seems you could go this way. 我从没做过，但看来您可以这样做。

OK, found a solution using CSS Media Queries after all, by setting the display property of the img. 好的，毕竟通过设置img的display属性，找到了使用CSS Media Queries的解决方案。 Bit of a fudge, but fine for now. 有点忽悠，但现在还可以。

Basically I created two divs, one with a 'landscape' id and another with 'portrait', positioned absolutely on top of each other. 基本上，我创建了两个div，其中一个的ID为“ landscape”，另一个为“ portrait”，它们彼此之间绝对位于顶部。 Then used @media queries to show/hide the relevant div with the display: property. 然后使用@media查询显示/隐藏带有display：属性的相关div。 Very clumsy, not at all suitable for the web but okay for an iPad app loading data straight from memory. 非常笨拙，根本不适合网络使用，但对于直接从内存加载数据的iPad应用程序来说还可以。 And this was before "responsive images" became a thing. 这是在“响应式图像”成为现实之前。