Question

我正在使用带有iScroll插件的jQuery Mobile开发移动网站模板。基本上我想要一个静态页脚和标题。除了iScroll.js之外，我还包括Kazuhiro Osawa的jquery iScroll脚本，以使其与JQM一起工作。在他的脚本中，您可以偏移Safari Mobile中URL栏的高度。问题是在页面加载Safari的URL栏隐藏并在底部创建一堆填充之后。在脚本中我可以抵消这一点，但这会杀死Android UX。有没有人对此有任何想法或解决方案？理想情况下，我想检测设备窗口大小并执行以下操作：[设备窗口大小 - （页眉高度+页脚高度）] =可滚动窗口大小。这样我就不必硬编码特定于设备的工作。感谢。

<div data-role="page" data-iscroll="enable" id="home">

      <div data-role="header">
    <h1>INDEX PAGE</h1>
      </div>

      <div data-role="content">
    <div data-iscroll="scroller">
          <ol data-role="listview">
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
        <li>foo</li>
      </ol>
    </div>
      </div>

      <div data-role="footer" class="ui-bar" style="height:45px">
    I'm a Footer
      </div>

    </div>

这是与iSQuery相结合的脚本w / jQuery Mobile

(function($) {
$(function() {

var SafariWindowHeightFix = 34; // Here is where you can offset the height of the URL bar:

function fixed(elm) {
    if (elm.data("iscroll-plugin")) {
        return;
    }

    // XXX: fix crumbled css in transition changePage 
    // for jquery mobile 1.0a3 in jquery.mobile.navigation.js changePage
    //  in loadComplete in removeContainerClasses in .removeClass(pageContainerClasses.join(" "));
    elm.css({
        overflow: 'hidden'
    });

    var barHeight = 0;
    var $header = elm.find('[data-role="header"]');
    if ($header.length) {
        $header.css({
            "z-index": 1000,
            padding: 0,
            width: "100%"
        });
        barHeight += $header.height();
    }

    var $footer = elm.find('[data-role="footer"]');
    if ($footer.length) {
        $footer.css({
            "z-index": 1000,
            padding: 0,
            width: "100%"
        });
        barHeight += $footer.height();
    }

    var $wrapper = elm.find('[data-role="content"]');
    if ($wrapper.length) {
        $wrapper.css({
            "z-index": 1
        });
        $wrapper.height($(window).height() - barHeight - SafariWindowHeightFix);
        $wrapper.bind('touchmove', function (e) { e.preventDefault(); });
    }

    var scroller = elm.find('[data-iscroll="scroller"]').get(0);
    if (scroller) {
        var iscroll = new iScroll(scroller, {desktopCompatibility:true});
        elm.data("iscroll-plugin", iscroll);
    }
}
$('[data-role="page"][data-iscroll="enable"]').live("pageshow", function() {
    fixed($(this));
});
if ($.mobile.activePage.data("iscroll") == "enable") {
    fixed($.mobile.activePage);
}

});
})(jQuery);

Answer 1

简短的回答是，您不再需要iScroll在Mobile Safari中拥有固定的页眉和页脚（您从未真正需要Android），因为在iOS5中添加了position：fixed和-webkit-overflow-scrolling。 Mobile Tuts做了一篇非常好的文章，详细解释了这里的变化：http://mobile.tutsplus.com/tutorials/mobile-web-apps/ios-5-fixed-positioning-and-content-scrolling/

在Safari Mobile上禁用URL栏隐藏

1 个答案: