如何在页面调整大小时刷新我的jQuery Mobile样式?

时间:2013-07-26 11:43:06

标签: javascript css3 jquery-mobile responsive-design

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

在一定的大小,我通过显示高分辨率标头并隐藏低分辨率来替换页眉和页脚(从移动的外观和感觉转移到更传统的设计)。

我遇到的问题是JQM的样式似乎不适用于隐藏的元素,所以当我调整屏幕大小时,样式都搞砸了。

我试过了......

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

似乎什么都没做。从狩猎所有的例子我已经看到提到刷新或触发特定元素,但我正在寻找更广泛的页面,以允许我正确使用我的媒体查询。

2 个答案:

答案 0 :(得分:2)

它根本不做任何事情,因为你用不正确的参数调用触发器。

应该是:

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

Create 只会增强网页内容, pagecreate 会增强网页页眉,内容和页脚。

工作示例:http://jsfiddle.net/Gajotres/PMrDn/52/

答案 1 :(得分:0)

尝试类似:

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