android - "hamburger icon"或 HTML 实体 ☰ 的回退是什么？

Question

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

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

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

但是我在推特上看到有些Android手机不支持实体(或者可能是对应的Unicode字符)。如何修改我的 HTML 以获得后备？

Answer 1

图像是解决此问题的错误方法 - 在我看来，实体也是如此。因为这个根本没有得到很好的支持。没有 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;
}