Динамическое редактирование img src на основе ориентации устройства с помощью JS или JQuery

Question

Я работаю с каркасом журнала iOS (PugPig), который загружает документы HTML в представление с поддержкой WebKit (без хромовой версии Mobile Safari).

Я бы хотел, чтобы каждая «страница» загружала либо портретили альбомная версияв зависимости от ориентации устройства.По разным причинам это должно бытьа не фоновое изображение CSS, поэтому медиа-запросы не будут работать.Поскольку я загружаю HTML с локального устройства, никакие веб-серверы не могут быть использованы.

Так что я предполагаю, что JS - это путь, но он должен был бы обнаружить изменение ориентации (или, по крайней мере, экранwidth) на лету, без обновления страницы, и я не знаю, возможно ли это.

Не очень знаком с JS, поэтому нет примера кода (все мои попытки пока что являются автомобильными авариями).Извините.

Любая помощь высоко ценится.

Answer 1

Вы пробовали jQuery mobile orientationchange события ?

Я никогда не делал этого, но, кажется, вы могли бы пойти по этому пути.

Answer 2

ОК, в конце концов, нашел решение с помощью CSS Media Queries, установив свойство display для img. Немного выдумки, но пока хорошо.

По сути, я создал два элемента div, один с идентификатором 'landscape' и другой с 'портретом', расположенные абсолютно друг над другом. Затем использовал @media запросов, чтобы показать / скрыть соответствующий div с помощью свойства display:. Очень неуклюжий, совсем не подходящий для Интернета, но вполне подходящий для приложения iPad, загружающего данные прямо из памяти. И это было до того, как «отзывчивые изображения» стали вещью.