从安卓/苹果手机中删除网址搜索栏

Remove the url search bar from android/iphone

本文关键字：删除 搜索栏 手机 苹果      更新时间：2023-09-26

我有一个表格，在一页上：

<table  border="0" width="320px" height="480px" style="background-color: black;">

更新：

我想删除上面的搜索栏...所以这就是我用于适应移动设备的全部内容：

 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <title></title>
     <style type="text/css">
          body{
              margin:0px;
              padding: 0px;
          }
     </style>
     <script>
         window.addEventListener("load",function() {
           // Set a timeout...
           setTimeout(function(){
           // Hide the address bar!
           window.scrollTo(0, 1);
           }, 0);
         }); 
    </script>   
 </head>

我仍然可以看到一英寸的导航栏。但我试图删除那一英寸，但不能

尝试根据

方向对不同的 CSS 规则使用媒体查询：

   /* 我假设肖像是起点 */   .元素{        规则：值;    }    @media(方向：横向({        .元素{            规则：不同的值;        }    }

但也许可以考虑设计一些响应速度更快的东西

        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <title>Your <?php echo  $app_name; ?> </title>
        <style type="text/css">
            body{
                margin:0px;
                padding: 0px;
            }
             /* i assume portrait to be the starting point */
        </style>
        <script>
     window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
    window.scrollTo(0, 1);
  }, 0);
}); 
var preventDefault = function(e) {
    e.preventDefault();
    return false;
};
document.addEventListener('touchmove',preventDefault,false);
document.body.addEventListener('touchmove',preventDefault,true);
window.addEventListener('touchmove',preventDefault,true);
    </script>
    </head>

这就是我想要的..没有导航，并禁用所有事件

至于隐藏导航栏，仅当您有足够的页面高度来填充剩余空间时，将页面滚动到 0 才有效。我有时会使用 javascript 在滚动之前和之后重新调整和调整大小，

function scrollWinToTop () {
    document.body.style.height = (window.innerHeight *1.5) + 'px'; //a lot of pixels or a large precentage
    window.scrollTo(0, 1); // moves the viewport to the top
    document.body.style.height = 'auto'; // OR clientHeight + 'px' OR something
}

这个网站还有一些其他的建议，但这个严肃的，不用担心的建议可以在github：gist中找到，并回答你的问题(为方便起见，粘贴在这里(：

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 );

据我所知，添加到页面的额外高度(这给您带来了问题(和 scrollTo(( 语句的组合使地址栏消失了。

在同一站点上，隐藏地址栏的"最简单"解决方案是使用 scrollTo(( 方法：

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

这将隐藏地址栏，直到用户滚动。

该站点将相同的方法放在超时函数中(没有解释理由，但它声称没有它的代码无法正常工作(：

// When ready...
window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
     window.scrollTo(0, 1);
  }, 0);
});
相关文章：