jQuery移动页面高度
在过去的一天里，我一直试图弄清楚如何在移动safari中查看时更改jQuery移动页面上的最小高度样式。 我试过，内联样式，覆盖ui页面样式，还没有找到一种方法来覆盖data-role =“page”的高度。 理想情况下，如果页面“内容”小于“页面”高度，我希望“页面”高度自动调整为“内容”。 我附上了一个插图，以便更好地解释这个问题。
data-role="page"元素的min-height是通过JavaScript在window对象的resize事件处理程序中设置的。 您可以创建自己的JavaScript，以不同的方式调整页面大小：
$(function () { $(window).bind('resize', function (event) { var content_height = $.mobile.activePage.children('[data-role="content"]').height(), header_height = $.mobile.activePage.children('[data-role="header"]').height(), footer_height = $.mobile.activePage.children('[data-role="footer"]').height(), window_height = $(this).height(); if (content_height < (window_height - header_height - footer_height)) { $.mobile.activePage.css('min-height', (content_height + header_height + footer_height)); setTimeout(function () { $.mobile.activePage.children('[data-role="footer"]').css('top', 0); }, 500); } event.stopImmediatePropagation(); }).trigger('resize'); });
这是一个演示： http ： //jsfiddle.net/sAs5z/1/
注意setTimeout用于设置fixed-position-footer ; 超时持续时间可能会变小。 这是因为jQuery Mobile Framework将fixed-position-footer重新fixed-position-footer回页面底部。 这方面的一个例子可以在这里看到： http ： //jsfiddle.net/sAs5z/
另请注意，您可能只想重新定位fixed-position-footer元素并使页面的min-height属性保持不变; 这将使页面渐变覆盖整个屏幕，但页脚与内容之间不会有任何空间。 以下是此方法的演示： http ： //jsfiddle.net/sAs5z/2/
老票，但我有一个我更喜欢的解决方案。 它通过一些jQuery内部黑客攻击专门解除了resize事件的绑定。 我不喜欢Jasper的解决方案，因为它依赖于一个事件来阻止另一个事件，理论上的事件永远不会知道彼此/你永远不应该依赖于事件触发的顺序。
$(function() { // WARNING: Extremely hacky code ahead. jQuery mobile automatically // sets the current "page" height on page resize. We need to unbind the // resize function ONLY and reset all pages back to auto min-height. // This is specific to jquery 1.8 // First reset all pages to normal $('[data-role="page"]').css('min-height', 'auto'); // Is this the function we want to unbind? var check = function(func) { var f = func.toLocaleString ? func.toLocaleString() : func.toString(); // func.name will catch unminified jquery mobile. otherwise see if // the function body contains two very suspect strings if(func.name === 'resetActivePageHeight' || (f.indexOf('padding-top') > -1 && f.indexOf('min-height'))) { return true; } }; // First try to unbind the document pageshow event try { // This is a hack in jquery 1.8 to get events bound to a specific node var dHandlers = $._data(document).events.pageshow; for(x = 0; x < dHandlers.length; x++) { if(check(dHandlers[x].handler)) { $(document).unbind('pageshow', dHandlers[x]); break; } } } catch(e) {} // Then try to unbind the window handler try { var wHandlers = $._data(window).events.throttledresize; for(x = 0; x < wHandlers.length; x++) { if(check(wHandlers[x].handler)) { $(window).unbind('throttledresize', wHandlers[x]); break; } } } catch(e) {} });
在显示带有重叠$ .mobile.resetActivePageHeight（）的弹出窗口时，我遇到了同样的问题; 为我做了诀窍。 感谢名单！