菜单图标在 Chrome 中可见，但在 Android 的标准浏览器中不可见

Question

菜单"hamburger"图标在Android的标准浏览器中不可见(在三星S5和三星Note 2上进行了测试)，但在Chrome中确实出现了，一切都很完美。

使用svg图标

<header class="header">
  <div class="header__inner">
    <img class="header__logo" src="images/city.png" alt="iconic view of a cityscape">
    <h1 class="header__title">
      The Brighton Times
    </h1>
    <a id="menu" class="header__menu">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
      </svg>
    </a>
  </div>
</header>
<nav id="drawer" class="nav">
  <ul class="nav__list">
    <li class="nav__item"><a href="#">News</a></li>
    <li class="nav__item"><a href="#">Events</a></li>
    <li class="nav__item"><a href="#">Culture</a></li>
    <li class="nav__item"><a href="#">Blog</a></li>
  </ul>
</nav>

和responsive.css.

下面的代码

@media screen and (max-width: 549px) {
.header__logo {height: 48px;
margin-right: 0.5em;
}
.header__title {
margin-left: 0;
font-size: 2em;
vertical-align: bottom; 
}
.nav {
z-index: 10;
background-color: #fff;
width: 300px;
position: absolute;
/* This trasform moves the drawer off canvas. */
-webkit-transform: translate(-300px, 0);
transform: translate(-300px, 0);
/* Optionally, we animate the drawer. */
transition: transform 0.3s ease;
}
.nav.open {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav__item {
display: list-item;
border-bottom: 1px solid #E0E0E0;
width: 100%;
text-align: left;
}
.header__menu {
display: inline-block;
position: absolute;
right: 0;
padding: 1em;
}
.header__menu svg {
width: 32px;
fill: #000000;
}
}

哦，在我忘记之前，标准浏览器的整个右侧都是可点击的。所以无论你在哪里点击(只要在屏幕的右侧)，菜单(抽屉)就会出现。

我似乎无法解决这个问题。

Answer 1

经过搜索、阅读、等待，我终于找到了自己问题的答案。谁想使用svg图标，如果png是一个更好的选择?解决方案:

代替

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
  </svg>

直接用

<img src="/images/icon.png" height="32" width="32">

适合像我这样的新手。你可以从iconfinder.com下载一个汉堡包图标，保存为png(提示:至少128px并缩小(参见img src代码))。

就是这样了。适用于所有浏览器。问题解决了。

想想这段代码来自谷歌发起的课程。这很讽刺，因为他们自己的设计在他们自己的Android浏览器上并不好用。