使用 JS 或 JQuery 根据设备方向动态编辑 img src
我正在使用一个 iOS 杂志框架 (PugPig)，它将 HTML 文档加载到 WebKit 支持的视图（Mobile Safari 的无边框版本）中。
我希望每个“页面”加载 的纵向或横向版本取决于设备的方向。由于各种原因，它必须是一个
。而不是 CSS 背景图像，因此媒体查询将不起作用。因为我是从本地设备加载 HTML，所以也不能使用任何 Web 服务器内容。
所以我猜测 JS 是可行的方法，但它需要动态检测方向变化（或至少屏幕宽度），而不刷新页面，我不知道这是否可能。
对 JS 不太熟悉，因此没有示例代码（到目前为止我所有的尝试都是车祸）。对不起。
非常感谢任何帮助。
I am working with an iOS magazine framework (PugPig) which loads HTML documents into a WebKit powered view (a chromeless version of 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. For various reasons it has to be an <img/> rather than a CSS background image, so media queries won't work. Because I am loading HTML from the local device, no web server stuff can be used either.
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.
Not hugely familiar with JS hence no sample code (all my attempts so far are car crashes). Sorry.
Any help much appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您是否尝试过
jQuery mobile的orientationchange事件？我从来没有这样做过，但似乎你可以走这条路。
Did you try
jQuery mobile'sorientationchangeevents?I've never done this, but it seems you could go this way.
好的，通过设置 img 的显示属性，最终找到了使用 CSS 媒体查询的解决方案。有点胡言乱语，但现在还好。
基本上，我创建了两个 div，一个具有“横向”id，另一个具有“纵向”id，完全位于彼此之上。然后使用
@media查询通过 display: 属性显示/隐藏相关的 div。非常笨拙，根本不适合网络，但对于直接从内存加载数据的 iPad 应用程序来说还可以。那是在“响应式图像”成为现实之前。OK, found a solution using CSS Media Queries after all, by setting the display property of the img. 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. Then used
@mediaqueries to show/hide the relevant div with the display: property. Very clumsy, not at all suitable for the web but okay for an iPad app loading data straight from memory. And this was before "responsive images" became a thing.