Question

我正在开设一个Uni任务的网站，我有一个奇怪的移动问题。我创建了一个复选框，通过checked函数使菜单隐藏或在移动设备上可见。当我在Chrome或Firefox中模拟移动浏览器或使用Resizer时，它在我的计算机上运行良好。

虽然当我在移动设备（Android）上查看时，该复选框不可见。我在平板电脑上发现了相同的内容，但如果单击屏幕的右侧部分，则会出现菜单。移动设备和平板电脑都在运行Chrome for Mobiles，虽然我也在Opera Mini中进行了测试并遇到了同样的问题。它在PC上运行良好，但在手机上无法看到。

这是我的网站：http://wonx.dk/pwdh/

这是相关的HTML和CSS：

HTML：

<label for="menuon">&#x2630; &#x25be;</label>
<input type="checkbox" id="menuon">

CSS：

label {
    font-size:36px;
}

label:hover {
    color:#F03B4E;
}


input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

/* Checkbox Default State (if deleted menu is always visable) */
nav {
   display:none;
}

/* When clicked/Toggled State */
input[type=checkbox]:checked ~ nav {
   display:block;
}

Answer 1

问题出在☰和▾ - 他们没有使用Androids。

出于测试目的，请尝试用实际单词替换它们：

<label for="menuon">stripes arrow</label>

以下是演示：http://jsfiddle.net/sc0rv3na/10/

尝试使用图片或特殊字体，例如Font Awesome。

这是一个Font Awesome实现：http://jsfiddle.net/sc0rv3na/14/

编辑：虽然这个问题与Windows手机有关，但它基本上也回答了这个问题：https://stackoverflow.com/a/21997373/2037924

Unicode字符属于某些字体，如Arial Unicode MS，并非所有字体都支持多种Unicode字符。

要确保显示特殊的Unicode字符，您必须更改平台的字体。

编辑＃2 ：以下是向您的网站添加移动菜单图标的几种方法：http://css-tricks.com/three-line-menu-navicon/

复选框在手机上不可见

1 个答案: