“汉堡图标”或HTML实体符号☰的回退是什么？

Question

当在平板电脑上查看时，我的网站菜单栏如下：

当单击右侧的菜单图标时，会显示其他选项。该代码如下：

<div id="menu">
  <a id="metaMenu" href="#">&#9776;</a>
</div>

但我在 Twitter 上看到，一些 Android 手机不支持该实体（或者可能是相应的 Unicode 字符）。我该如何修改我的 HTML 代码以具备回退优化？

- JGallardo

---

为什么不使用图像？ - rkawano

也许甚至可以加上一个等号，因为这样每次都会非常美观。 - Josh Powell

@dymmeh：页面上的每个图像都是一个服务器请求，对性能有负面影响 - 这就是为什么很多人使用单个sprite.png，在其中放置网站中使用的所有图标的原因。 - Marco Panichi

使用 ≡ 取而代之对我有用，就像这里回答的那样：https://dev59.com/JY7da4cB1Zd3GeqP-DQD - Mark

Answer 1

据我所知，我使用≡大多数情况下都可以正常工作。

- Firewizz

---

我喜欢这个答案的简洁性。作为一个数学运算符，如果它不被普遍支持，我会感到惊讶。 - garydavenport73

Answer 2

使用图片或实体是不可取的，因为在我看来它们都没有得到良好支持。它们无法在Android上正常渲染，在Windows Chrome、Internet Explorer等上也会出现奇怪的问题。

应该采用CSS3的方法，因为这种方法被所有主流浏览器和所有现代移动设备所支持。

jsFiddle链接在此：http://jsfiddle.net/328k7/

请按照下面的CSS3代码进行编辑...

div {
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 14px;
    top: 0;
    height: 0;
    -webkit-box-shadow: 1px 10px 1px 1px #69737d,1px 16px 1px 1px     #69737d,1px 22px 1px 1px #69737d;
    box-shadow: 0 10px 0 1px #69737d,0 16px 0 1px #69737d,0 22px 0 1px #69737d;
}

- Mike Barwick

---

请纠正我，但根据caniuse的说法，在Safari和Android默认浏览器中不支持多重阴影，这使得它对于移动设备并不是最好的解决方案。 - markasoftware

如果你正在使用非常过时的Safari浏览器，那么@Markasoftware早就可以使用了。即使是移动设备，除非你在使用一块砖头 - 应该也能正常工作。我相信这段代码来自Zurb Foundation框架。 - Mike Barwick

哦，不用在意。我在 caniuse 网站上看表格的时候读错了。抱歉！ - markasoftware

Answer 3

Twitter Bootstrap使用的解决方案是使用span构建汉堡包菜单：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

相应的CSS代码如下:

.navbar-toggle {
   position: relative;
   float: right;
   padding: 9px 10px;
   margin-top: 8px;
   margin-right: 15px;
   margin-bottom: 8px;
   background-color: #cccccc;
   border: 1px solid transparent;
   border-radius: 4px;
}

.navbar-toggle .icon-bar {
   display: block;
   width: 22px;
   height: 2px;
   background-color:#000000;
   border-radius: 1px;
}

.navbar-toggle .icon-bar+.icon-bar {
   margin-top: 4px;
}

- Isaque Bressy

---

从BS4开始，您将希望使用单个<span>和navbar-toggler-icon类。 - McGuireV10

Answer 4

这是我最终的做法，使用在CSS中定义的内联SVG元素：

#menu_button {
    margin-top: 2vmin;
    margin-left: 2vmin;
    width: 8vmin;
    height: 8vmin;
    background-size: 100%;
    /* inline SVG element! */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 120 80" width="40" height="40" version="1.0" xmlns="http://www.w3.org/2000/svg"><rect x="15" width="90" height="15" rx="10"></rect><rect x="15" y="30" width="90" height="15" rx="10"></rect><rect x="15" y="60" width="90" height="15" rx="10"></rect></svg>');
}

请注意，url() 中的字符串必须全部在一行上，不能有换行符。然后将其插入到您的 HTML 中：

<button id="menu_button" type="button" onclick="show_menu()">
</button>

使用这种方法，您可以制作一个汉堡图片，样式完全符合您的要求，而无需从服务器加载单独的图像文件。

- monist