jquery - 避免通过 jquery mobile 添加 min-height

Question

我使用 jQuery Mobile 构建了一个应用程序，我使用phoneGap，并且我的应用程序是在 iframe 中构建的，因为我的平台(HP Anywhere)有一个框架。但是 jquery mobile 会在我的 data-role="page" DIV 上添加一个 min-height css 属性，实际上比设备的最大高度大一个像素，所以它会给我带来一些问题(T_T)。我想知道:jquery mobile什么时候会在页面div上添加这个CSS属性？以及如何避免这种情况？非常感谢。

Answer 1

jQuery Mobile 在两个事件 pageshow (pagecontainershow) 上设置页面的 min-height和throttledresize。它调用resetActivePageHeight功能。

要覆盖它，请对 pagecontainershow 进行更改，并稍微延迟一下以确保 resetActivePageHeight 完成。

$(document).on( "pagecontainershow", function ( e, data ) {
   var activePage = data.toPage;

   setTimeout(function () {
      var currentHeight = activePage.css( "min-height" );
      activePage.css( "min-height", currentHeight - 1 ); /* subtract 1px or set your custom height */
   }, 50); /* set delay here */
});

$(window).on( "throttledresize", function ( e ) {
   var activePage = $.mobile.pageContainer.pagecontainer( "getActivePage" );

   setTimeout(function () {
      var currentHeight = activePage.css( "min-height" );
      activePage.css( "min-height", currentHeight - 1 );
   }, 50);
});