“汉堡包图标”或 HTML 实体的后备方案是什么 ☰？

Question

在平板电脑上查看时，我将此作为网站的菜单栏：

单击右侧的菜单图标会显示其他选项。代码是

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

但是我在 Twitter 上看到，某些 Android 手机不支持该实体（或者可能是相应的 Unicode 字符）。如何修改 HTML 以实现后备？

Answer 1

尝试使用

≡

/ ≡

据我所知，这在大多数情况下都有效。

Answer 2

在我看来，图像是解决这个问题的错误方法——实体也是如此。因为这个根本没有得到很好的支持。没有 Android，在 Windows Chrome、Internet Explorer 等上呈现奇怪的效果。

走CSS3路线。每个主要浏览器以及所有现代移动设备都支持这一点。

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;
}

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>

使用此方法，您可以制作完全按照您想要的样式设计的汉堡包图像，但无需从服务器加载单独的图像文件。