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更好。。。。

最后

以上就是健忘小蚂蚁为你收集整理的jquery mobile在pc浏览器上设置min-height造成的错误的全部内容，希望文章能够帮你解决jquery mobile在pc浏览器上设置min-height造成的错误所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。