Question

我在页面上有一张桌子：

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

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

Answer 1

根据方向尝试使用媒体查询来处理不同的css规则：


    /* i assume portrait to be the starting point */
    .element{
        rule:value;
    }
    @media (orientation: landscape) {
        .element{
            rule:different value;
        }
    }

但考虑设计更具响应性的东西

Answer 2

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

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

Answer 3

隐藏导航栏，只有当页面有足够的高度填充剩余空间时，才能将页面滚动到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
}

Answer 4

这个网站还有一些其他建议，但这个严肃，无忧无虑的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);
});

从android / iphone中删除url搜索栏

4 个答案: