javascript - 如何在页面调整大小时刷新我的 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
    });
 });