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>

私はまだナビゲーションバーの1インチを見ることができます..しかし、私はその1インチを削除しようとしていますが、できません

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

このサイトには他にもいくつかの提案がありますが、このナンセンスで心配のないものは 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 に答える
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 に答える