jquery mobile在pc浏览器上设置min-height造成的错误

环境:win7 64位, chrome44.0.2403.125, jquery.mobile.1.4.2

问题:一个在移动设备上正确的网页,在pc上浏览显示不全,经查,在添加jquery.mobile.js,jquery.mobile.css之后,会在body下添加

<div data-role="page"style="min-height:600px;"></div>

考虑到兼容性,暂时不移除jquery.mobile

于是google(我会告诉你我用百度查不到)

解决办法1:

$(window).bind('resize', function (event) {
    setTimeout(function () {
        $.mobile.activePage.css("min-height", "1024px");
    }, 500);
    event.stopImmediatePropagation();
}).trigger('resize');

参考:

http://stackoverflow.com/questions/27559304/avoid-adding-min-height-by-jquery-mobile

http://www.scriptscoop2.com/t/ef6d531888c9/avoid-adding-min-height-by-jquery-mobile.html

解决办法2:

$(document).on("pagecontainershow", function (e, data) {
    setTimeout(function () {
        $.mobile.activePage.css("min-height", "1024px");
    }, 50); /* set delay here */
});

$(window).on("throttledresize", function (e) {
    setTimeout(function () {
        $.mobile.activePage.css("min-height", "1024px");
    }, 50);
});

参考:http://stackoverflow.com/questions/8929786/jquery-mobile-page-height/8930653#8930653?newreg=b7128eabab9a46419c6ebdaaed16dfcd

解决办法3:

function contentHeight() {
    $.mobile.activePage.css("min-height", 1024);
}
$(document).on("pagecontainertransition", contentHeight);
$(window).on("throttledresize orientationchange", contentHeight);

参考:https://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

http://stackoverflow.com/questions/21552308/set-content-height-100-jquery-mobile

ps:上面三个方法可以放到$(document).ready(function(){}):里调用,方法3最好,没有延迟,但移除jquery.mobile更好。。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值