如何在页面大小上更新我的jQuery Mobile样式？

Question

我有一个使用jQuery手机的响应式网站。

在一定的尺寸下，我通过显示高分辨率标题和隐藏低分辨率标题来换出页眉和页脚（从类似于外观的移动设备移动到更传统的设计）。

我面临的问题是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 
    }); 
});