使用jQuery移动隐藏地址栏的WebApp无法正常工作,因为谷歌浏览器存在高度错误

时间:2012-12-15 16:18:05

标签: android jquery-mobile hide fullscreen address-bar

当您在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中需要它。

0 个答案:

没有答案