dpglo66848 2012-05-08 10: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 10: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条)

报告相同问题?

悬赏问题

  • ¥15 QQ邮箱过期怎么恢复?
  • ¥15 登录他人的vue项目显示服务器错误
  • ¥15 (标签-android|关键词-app)
  • ¥60 如何批量获取json的url
  • ¥15 comsol仿真压阻传感器
  • ¥15 Python线性规划函数optimize.linprog求解为整数
  • ¥15 llama3中文版微调
  • ¥15 pg数据库导入数据序列重复
  • ¥15 三分类机器学习模型可视化分析
  • ¥15 本地测试网站127.0.0.1 已拒绝连接,如何解决?(标签-ubuntu)