Как использовать изменение ориентации в jQuery Mobile при работе с высотой?

Question

В jQuery Mobile я пытаюсь настроить высоту изображения в соответствии с высотой окна.Высота окна зависит от ориентации устройства, но я обнаружил, что всякий раз, когда я меняю ориентацию, высота окна, которое вставляется в выражения для высоты изображения, равна высоте окна ДО ориентациименять!Итак, как мне сделать так, чтобы он выбирал высоту окна ПОСЛЕ изменения ориентации и затем использовал это новое значение для регулировки высоты изображения?

Для кода, который у меня есть

$(window).bind('orientationchange',function(e){
  if(window.orientation == 0)
  {
    $('img').css('width') = $(window).height()*.5;
  }
  else
  {
    $('img').css('width') = $(window).height()*.6;
  }
});

Answer 1

Мне пришлось использовать setTimeout

var fixHeight = function () {

    var bodyHeight = $(document.body).height();

};


$(window).bind('orientationchange', function (e) {
    setTimeout(fixHeight,200);
});

Answer 2

Документация Mobile JQuery 1.1 говорит, что время отличается,
, поэтому вы не знаете, имеет ли ваш window-var старые или новые значения, но также предоставляет информацию, которая:

", хотя текущаяреализация даст вам правильное значение для event.orientation, полученное из window.orientation "

http://jquerymobile.com/demos/1.1.0/docs/api/events.html

Так что оно должно работать, когда вы изменяете window.orientation на e.orientation:

if(e.orientation == 0)
{
    ...
}

Answer 3

Я пытаюсь сделать что-то похожее, и использование относительного (%) размера для всех моих элементов, кажется, делает свое дело.Таким образом, у меня есть сетка изображений размером 5x3, а сама сетка состоит из элемента div размером {width: 100%;height: 60%}, затем 5 вертикальных столбцов, которые все являются div с {width: 18%;высота: 98%;margin: 1%}, а затем каждая ячейка является div {width: 90%;высота: 30%;margin: 5%}, и, наконец, изображение в ячейке div имеет стиль {width: 100%;высота: 100%}.

Это все еще находится на стадии разработки, и еще неизвестно, насколько хорошо это работает, когда я начинаю добавлять более сложные декорации к пользовательскому интерфейсу, и у меня может быть не совсем правильный процентпока что, но на данный момент у меня это хорошо масштабируется вверх и вниз.

И у меня также есть тег, описанный в предыдущем посте.

Answer 4

Возможно, вы слишком обдумываете это.Существует множество различных устройств, которые изначально поддерживаются платформой JQuery Mobile "из коробки".Это означает, что вам не нужно вручную кодировать изменения в пользовательском интерфейсе для соответствующих событий изменения ориентации.Эта встроенная функциональность должна обрабатывать большую часть презентации пользовательского интерфейса.

Из документации JQuery Mobile : метатег Viewport: обратите внимание выше, что в заголовке есть метатег viewport, указывающий, какбраузер должен отображать уровень масштабирования страницы и размеры.Если это не установлено, многие мобильные браузеры будут использовать «виртуальную» ширину страницы около 900 пикселей, чтобы она хорошо работала с существующими сайтами для настольных компьютеров, но экраны могут выглядеть уменьшенными и слишком широкими.Если для атрибутов области просмотра установлено значение content = "width = device-width, initial-scale = 1, ширина будет установлена ​​равной ширине в пикселях экрана устройства.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Эти настройки не отключаютпользователь может масштабировать страницы, что приятно с точки зрения доступности. В iOS есть небольшая проблема, которая неправильно устанавливает ширину при изменении ориентации с этими настройками видового экрана, но, надеюсь, это будет исправлено в будущем выпуске.другие значения области просмотра, чтобы отключить масштабирование, если это необходимо, так как это часть содержимого вашей страницы, а не библиотеки.

Я бы начал с удаления вашего window.bind кода JQuery Mobile и установки окна просмотра по умолчанию, как указано выше., перепроверьте. Позвольте фреймворку помочь вам и сделайте то, для чего он был предназначен.