当您在WebbApps中隐藏地址栏时,您几乎感觉到原生应用程序。不幸的是,只有在内容足够大的情况下,隐藏地址栏才能在jQuery mobile中运行。如果内容太小则无效 - 同时使用全屏和固定页脚 - 请参阅http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html。 Reason似乎是Android中浏览器中的错误。如果内容太小,jQuery funktion $(window).height()只提供450px的屏幕高度(我使用Android 2.3.6和Galaxy S2)。地址栏的高度缺失。内容是否足够大,功能提供508px - 正如预期的那样。也是一个非常好的方法 - http://www.semicomplete.com/blog/tags/jquery%20mobile - 不起作用。我找到了一个有效但需要延迟500毫秒的解决方案。当您加载页面一小段时间时,它会带来一个翻转的地址栏。还有另一个approch,地址栏没有翻转吗?
但也许有人知道如何才能更好地发挥作用。它适用于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-function在jQuery中实现,但在oriantationchange或文本字段中的输入后它不起作用。所以在setTimeout-function中需要它。