Question

我有一个桌面版网站，我为移动网站创建了一个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>`

Answer 1

你去吧

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Answer 2

您可以阅读有关媒体查询和响应式设计技巧的更多信息here

如何为不同的移动网站工作制作CSS

2 个答案: