使用JS或JQuery基於設備方向動態編輯img src

Question

我正在使用iOS雜志框架（PugPig），該框架將HTML文檔加載到WebKit支持的視圖（Mobile Safari的無邊框版本）中。

我希望每個“頁面”根據設備的方向加載<img />的縱向或橫向版本。 由於各種原因，它必須是<img />而不是CSS背景圖片，因此媒體查詢將無法工作。 因為我正在從本地設備加載HTML，所以也無法使用任何Web服務器。

因此，我猜想JS是可行的方法，但是它需要在不刷新頁面的情況下即時檢測方向變化（或至少是屏幕寬度），而且我不知道這樣做是否可行。

對JS不太熟悉，因此沒有示例代碼（到目前為止，我所有的嘗試都是車禍）。 抱歉。

任何幫助，不勝感激。

Answer 1

您是否嘗試過jQuery mobile的orientationchange 事件 ？

我從沒做過，但看來您可以這樣做。

Answer 2

好的，畢竟通過設置img的display屬性，找到了使用CSS Media Queries的解決方案。 有點忽悠，但現在還可以。

基本上，我創建了兩個div，其中一個的ID為“ landscape”，另一個為“ portrait”，它們彼此之間絕對位於頂部。 然后使用@media查詢顯示/隱藏帶有display：屬性的相關div。 非常笨拙，根本不適合網絡使用，但對於直接從內存加載數據的iPad應用程序來說還可以。 這是在“響應式圖像”成為現實之前。