dpglo66848
dpglo66848
2012-05-08 10:36

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

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 dongshen3352 9年前

    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 );
    
    点赞 评论 复制链接分享
  • duanfuchi7236 duanfuchi7236 9年前

    Try this,

    For android:

    if(navigator.userAgent.match(/Android/i)){
        window.scrollTo(0,1);
     }
    

    For iPhone:

    <meta name="apple-mobile-web-app-capable" content="yes" />
    
    点赞 评论 复制链接分享
  • douzhi1972 douzhi1972 9年前

    The way I usually do this is:

    window.addEventListener("load",function() {
      setTimeout(function(){
        window.scrollTo(0, 1);
      }, 0);
    });
    

    But it will only work if the page is long enough to scroll down a bit.

    点赞 评论 复制链接分享
  • doulang9521 doulang9521 9年前

    The "scroll down" javascript trick should work on both iPhone and Android:

    http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/

    Not sure about other mobile browsers though sorry. Are you talking about Blackberry, Windows phone, etc. or more basic phones?

    点赞 评论 复制链接分享

为你推荐