Question

我使用jQuery Mobile构建了一个APP，我使用了phoneGap，而我的APP是在iframe中构建的，因为我的平台（HP Anywhere）有一个框架。但是jquery mobile会在我的min-height DIV上添加一个data-role="page" 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);
});

Answer 2

我不确定它何时添加它，但我认为解决方案是设置一个值为0的最小高度，因此它就像它不存在一样，同时阻止CSS生成它自己的。

Answer 3

我刚刚遇到这个问题并找到了一个简单的解决方案。

这是由JQM计算页面高度引起的，最后得到的答案大于它应该的大小，然后插入内联CSS来强制“页面”的最小高度。当我看到这个时，我从data-role =“page”DIV一直搜索DOM，寻找任何可能影响高度计算的填充或边距设置元素。

对我来说，解决方案是覆盖BODY标签上用户代理设置的'margin：8px'。将此设置为零使得JQM的高度计算正常工作：垂直滚动条消失，用户在比屏幕短的页面上垂直滚动的能力也消失了。

body {
    margin: 0;
}

也许它不是你的BODY标签，但你应该检查层次结构中是否存在任何可能导致JQM绊倒的问题。

Answer 4

对我来说，我通过添加以下css完全删除了添加的最小高度。

.ui-page.ui-page-active {
  min-height: auto !important;
}

避免通过jquery mobile添加min-height

4 个答案: