Question

我有一张桌子,在一页上:

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

<强 > UPATE:

我想删除上面的搜索栏... 这就是我用来适应移动的:

 <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

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

尝试对基于方向的不同 cs 规则使用媒体查询 :


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

考虑设计一些更能回应问题的东西,也许

Answer 3

as to hiding the navigation bar, scrolling the page to 0 will only work if you have enough height to your page to fill the remaining space. I sometimes use javascript to rezise and resize back, before and after the scrolling,

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

这个网站也有一些其他建议, 但这个不高调、不担心的,

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

据我所知,页面上增加的额外高度(给您造成问题)和滚动To () 语句使地址栏消失。

从同一个站点隐藏地址栏的最简单办法是使用滚动To () 方法:

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

友情链接