jQuery 移动页面高度

Question

在过去的一天里，我一直试图弄清楚在移动 safari 中查看时如何更改 jQuery 移动页面上的最小高度样式。我已经尝试过，内联样式，覆盖 ui-page 样式，但还没有找到一种方法来覆盖 data-role="page" 的高度。理想情况下，如果页面“内容”小于“页面”高度，我希望“页面”高度自动调整为“内容”。我附上了一个插图来更好地解释这个问题。

<div data-role="page">
     <div data-role="header">
             Header Elements
     </div>
     <div data-role="content" class="homeNav">
            <ul data-role="listview" data-inset="false" data-filter="false">
                <li><a href="expertise.html">Expertise</a></li>
                <li><a href="greatesthits.html">Greatest Hits</a></li>
                <li><a href="profile.html">Profile</a></li>
                <li><a href="mindset.html">Mindset</a></li>
                <li><a href="connect.html">Connect</a></li>
             </ul>  
     </div><!-- /content -->

     <div data-role="footer" data-position="fixed">
             Footer elements
     </div><!-- /footer -->
</div><!-- /page -->

Answer 1

在显示带有叠加层的弹出窗口时，我遇到了同样的问题 $.mobile.resetActivePageHeight();为我做了伎俩。谢谢！

Answer 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) {}
});

Answer 3

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 框架将 fixed-position-footer 重新定位到页面底部。可以在这里看到一个例子：http://jsfiddle.net/sAs5z/

另外注意，您可能只想重新定位fixed-position-footer 元素并保持页面的min-height 属性不变；这将使页面渐变覆盖整个屏幕，但页脚与内容之间不会有任何空间。下面是这个方法的一个演示：http://jsfiddle.net/sAs5z/2/