1

我有一张桌子，在一个页面上：

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

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

4

4 回答 4

1

尝试使用基于方向的不同 css 规则的媒体查询：

    /* 我假设肖像是起点 */
    。元素{
        规则：值；
    }
    @media（方向：横向）{
        。元素{
            规则：不同的值；
        }
    }

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

于 2012-05-23T07:24:22.667 回答
0 
        <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>

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

于 2012-05-23T07:54:52.850 回答
0

至于隐藏导航栏，只有当您的页面有足够的高度来填充剩余空间时，将页面滚动到 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
}
于 2012-06-14T11:07:28.043 回答
0

这个网站还有一些其他的建议，但是这个严肃的、不用担心的可以在 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);
});
于 2013-01-02T02:40:19.787 回答