WebbAppsでアドレスバーを非表示にすると、ネイティブアプリのような感覚が得られます。残念ながら、アドレスバーを非表示にすることは、コンテンツが十分に大きい場合にのみjQuerymobileで機能します。コンテンツが小さすぎる場合は、フルスクリーンおよび固定フッターでも機能しません。http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.htmlを参照してください。理由はAndroidのブラウザのバグのようです。コンテンツが小さすぎる場合、jQuery関数$(window).height()は画面の高さとして450pxしか提供しません(私はGalaxyS2でAndroid2.3.6を使用しています)。アドレスバーの高さがありません。期待どおり、関数が508pxを提供するのに十分な大きさのコンテンツですか。また、非常に優れたアプローチ-http://www.semicomplete.com/blog/tags/jquery%20mobile-動作しません。私は機能するが500msの遅延が必要な解決策を見つけました。短時間ページをロードすると、アドレスバーがめくります。アドレスバーの反転がないという別のアプローチはありますか?
しかし、おそらく誰かがこれがさらにうまくいく方法についての考えを持っています。そしてそれはiOSでうまく機能しますか?誰かがiPhoneでこれをテストできたら素晴らしいと思います。前もって感謝します。
ここにコードがあります:
var fixgeometry = function() {
/* Calculate the geometry that our content area should take */
var header = $(".header:visible");
var footer = $(".footer:visible");
var content = $(".content:visible");
var viewport_height = $(window).height()+60; /*Here is the idea! Make it bigger here and make it later smaller*/
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
/* Trim margin/border/padding height */
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
setTimeout(function(){
window.scrollTo(0, 1);
content.height(content_height-60); }, 500 );
};
$(document).ready(function(){
$(window).bind("orientationchange resize pageshow", fixgeometry);
});
scrollTo関数はjQueryに実装されていますが、oriantationchangeまたはテキストフィールドへの入力後には機能しません。したがって、ここではsetTimeout-functionで必要です。