jQuery Mobile と iScroll プラグインを使用してモバイル サイト テンプレートを開発しています。基本的に、静的なフッターとヘッダーが必要です。iScroll.js に加えて、JQM で動作させるために、大澤和宏による jquery iScroll スクリプトも含めています。彼のスクリプトでは、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>
iScroll と 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);