jQuery Mobile - серое мертвое пространство (изображение)

Question

Ссылка на мое приложение: http://gizeto.com/app_orange/index.html

Я не понимаю, почему это происходит на orientationchange. Кто-нибудь это признает?

Answer 1

Похоже, что вы используете iScroll для прокручиваемых областей. В этом случае вам нужно будет обновлять экземпляр iScroll всякий раз, когда на объекте window запускается событие resize или orientationchange:

var myScroll = new iScroll();

//you can change `resize` to `orientationchange` if you only want to support mobile devices
$(window).bind('resize', function () {
    myScroll.refresh();
});

Источник: http://cubiq.org/iscroll-4#refreshmethod

Это должно поддерживать область iScroll правильных размеров при изменении размера документа. Если контейнер iScroll (в вашем случае это элемент data-role="content") по-прежнему не обновляет свою высоту, вам может потребоваться сделать это вручную:

$(window).bind('resize', function () {
    $.mobile.activePage.children('[data-role="content"]').height('{HEIGHT HERE}px');
    myScroll.refresh();
});