1

デスクトップ サイトがあり、モバイル サイト用の css ファイルを作成しました。ほとんどのモバイルでは見栄えがしますが、Android タブレット ブラウザでは、メニュー リンクの背景色が表示されません。これをどのようにデバッグしますか? css をコーディングして、Android ブラウザだけに変更を加える方法はありますか? どこから始めればよいかわかりません。ありがとう

質問をさらに説明するには: iphone と android でうまく機能するモバイル css ファイルがあります。http://thepetwiki.com/q2a/などのサイトの一部だけが iPhone で機能しますが、Android タブレットではメニュー ドロップダウンが機能しません。Androidタブレットでも機能するようにコードを変更するにはどうすればよいですか?

      .navigation {
    max-width: none;
    background: #21a9e9;
    padding: 0;
    list-style: none;
    }

    .navigation li {
      float: left;
    }

  .navigation li a {
    display: block;
    color: #fff;
    padding: 10px;
  }

  .navigation li a:hover {
    background: #0fcaf2;
    text-decoration:none;
  }
  .navheader { 
    font-size: 30px;
    padding-top: 0;
    /*font-family: helvetica;*/
  }

  .slide-trigger {
    display: none;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    color: #FFFFFF;
  }

  .slide-trigger span {
    background-image: url("skins/mobile/dropdown-arrows.png");
    background-position: 0 -14px;
    display: block;
    float: right;
    margin-top: 3px;
    height: 14px;
    width: 32px;
  }
  @media only screen and (max-width: 1000px) {
    .slide-trigger { display: block; }
      .no-js .slide-trigger { display: none; }
    .navigation { display: none; }
      .no-js .navigation { display: block; }
    .navigation { margin: 0 15px; }
    .navigation li { float: none; }
    .navigation li a { border-bottom: 1px solid #fff; }
  }
  </style>
<script>
/* MOBILE COLLAPSE MENU */
(function($) {
  $.fn.collapsable = function() {
    // iterate and reformat each matched element
    return this.each(function() {
      // cache this:
      var obj = $(this);
      var tree = obj.next('.navigation');
      obj.click(function(){
        if( obj.is(':visible') ){tree.toggle();}
      });
      $(window).resize(function(){
        if ( $(window).width() <= 1000 ){tree.attr('style','');};
      });
    });
  };
})(jQuery);
var $j = jQuery.noConflict();
$j(document).ready(function(){
    $j('.slide-trigger').collapsable();
});
</script>`
4

2 に答える 2

0

メディア クエリとレスポンシブ デザイン テクニックの詳細については、こちらをご覧ください。

于 2013-08-14T09:12:11.013 に答える