Question

菜单＆＃34;汉堡＆＃34;在Android的标准浏览器中看不到图标（在Samsung S5和Samsung 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

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

而不是

<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代码））。

你有它。适用于所有浏览器。问题解决了。

并认为此代码来自Google发起的课程。具有讽刺意味的是，因为他们自己的设计在他们自己的Android浏览器中效果不佳。

菜单图标在Chrome中可见，但在Android的标准浏览器中无法显示

1 个答案: