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

Question

У меня есть отзывчивый сайт с использованием jQuery mobile.

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

Проблема, с которой я столкнулся, заключается в том, что стили JQM, похоже, не применяются к скрытым элементам, поэтому, когда я настраиваю размер экрана, стили все испорчены.

Я попытался это ...

 $(window).on('resize', function() { 
      $.mobile.activePage.trigger('create'); 
     }); 

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

Answer 1

Он вообще ничего, потому что вы вызываете триггер с некорректным параметром не делать.

Оно должно быть:

$(window).on('resize', function() { 
    $.mobile.activePage.trigger('pagecreate'); 
}); 

Create только повысит содержание страницы, pagecreate увеличит заголовок страницы, содержание и колонтитул.

Рабочий пример: http://jsfiddle.net/Gajotres/PMrDn/52/

Answer 2

Попробуйте что-то вроде:

$(window).on('resize', function() 
{ 
    jQuery.mobile.changePage(window.location.href, 
    { 
     allowSamePageTransition: true, 
     transition: 'none', 
     reloadPage: true 
    }); 
});