dpglo66848 2012-05-08 02:36
浏览 39
已采纳

如何在移动网络应用程序中隐藏地址栏?

I'm creating a mobile web app (not native), and I want to use the complete screen height for my application. The problem is that the address bar of the browser takes up a lot of space, leaving me with about 4/5 of the entire screen.

I've made my app so that there's never any scrolling, the site always fits the height of the user's screen. What I'm really after, is what the facebook mobile website does. It scrolls down to hide the address bar.

Is there any universal way of doing this, for Android devices as well as Iphone, and in different mobile browsers (different address bar sizes)?

BTW: I'm using Iscroll4 to get a fixed footer and header.

EDIT: This is the code I ended up with. I added two button to let the user choose whether or not to use fullscreen mode. This code works in combination with Iscroll4 and Jquery.

<script type="text/javascript">
$(document).ready(function() {
    var fullscreen = false;

    if(fullscreen==false)
    {
        window.removeEventListener("orientationchange", function(){ hideAddressBar(); } );
        window.addEventListener("orientationchange", function(){ showAddressBar(); } );
    }
    else
    {
        window.removeEventListener("orientationchange", function(){ showAddressBar(); } );
        window.addEventListener("orientationchange", function(){ hideAddressBar(); } );
    }

    $('#fullscreen').click(function(){
       hideAddressBar();
       fullscreen = true;
    });
    $('#normalscreen').click(function(){
       showAddressBar();
       fullscreen = false;
    });

});
function hideAddressBar()
{
    document.body.style.height = (window.outerHeight + 20) + 'px';
    window.scrollTo(0, 1);
}
function showAddressBar()
{
    document.body.style.height = (window.outerHeight - 20) + 'px';
    window.scrollTo(0, 0);
}

展开全部

  • 写回答

4条回答 默认 最新

  • dongshen3352 2012-05-08 02:44
    关注

    You can find a good article on how this is achieved here http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/

    Sample script

    function hideAddressBar()
    {
      if(!window.location.hash)
      {
          if(document.height < window.outerHeight)
          {
              document.body.style.height = (window.outerHeight + 50) + 'px';
          }
    
          setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
      }
    }
    
    window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
    window.addEventListener("orientationchange", hideAddressBar );
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)
编辑
预览

报告相同问题?

手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部