android - Bootstrap 下拉菜单在 Android 上不起作用

问题

如果你去 https://oorkle.com/browse从桌面浏览器查看左侧，您会看到一个使用 Bootstrap 下拉菜单的过滤器/侧边栏，您会看到它们可以正常工作(它们会下拉):

如果你足够缩小 View ，一些 jQuery 会将这些下拉菜单移动到二级顶部导航栏中，但它们仍然可以工作(它们会下拉):

---

现在，如果您在从 Android 或 iOS(iPhone 或 iPad)加载页面时尝试这些相同的操作，您会发现下拉菜单不再起作用:

---

HTML

如果你 diff the HTML of the desktop version and the HTML of the Android/iOS version ，您只会看到细微的 CSS 差异:

---

如果你 diff the live HTML (with modifications from JavaScript) ，与上面的差异唯一真正的区别是每个选择器都添加了一个 mobile 类:

---

我尝试过的

• 如果您尝试 Chrome Devtools 中的 Responsive 选项，该选项使用 Android User-Agent 字符串，下拉菜单将不起作用，无论页面加载时有多宽。
• 我尝试将服务器配置为为桌面和 Android/iOS 版本的页面提供 相同 HTML，我看到相同的行为:桌面下拉菜单正常工作，而 Android/iOS 下拉菜单不工作。
• 我尝试使用 Chrome Devtools 从选择器中删除 mobile 类，但这似乎没有任何效果(下拉菜单仍然没有出现)。
• 该网站使用的是 Boostrap v3.0.3。如果我用最新的 v4.1.3 bootstrap.js 文件替换 v3.0.3 bootstrap.js 文件它仍然不起作用，但我不确定它是否CSS 类可能会发生变化，或者 CSS 类可能会发生变化。
• 我已经在实际的 Android 设备上进行了尝试，以确认它确实发生了，而不仅仅是 Chrome Devtools 错误。
• 我尝试将网站从 Bootstrap v3.0.3 更新到最新的 v3，v3.3.7，但似乎没有任何效果。

---

我猜发生了什么

在我看来，Bootstrap 正在以某种方式使用用户代理字符串，这导致下拉菜单不起作用。

---

我在网上找到的相关问题

• 我在 Google 上找到了 this Bootstrap documentation page和 this SO question但是虽然它们看起来有些相关(因为它们涉及用户代理字符串的错误)，但它们似乎并没有解决我的问题。
• Google Chrome for Android <select> element doesn't select any option
• 此人似乎遇到了同样的问题:Simple html select not working on android chrome
• 2016.09.21 - Google Chrome Help Forum - Select option not working on new update chrome

  It is likely that your library (or your code) handles the first click by simulating a second click programmatically on the HTML select when the user clicks on the outer element.

  A programmatic/scripted mouseevent is considered "non-trusted" and the default event will not be handled. Aka, the select will not be expanded and the user must click again.

  If you are using a library that provides an entire widget (some element + an HTML select), try updating your library to the latest version to see if they are taking another approach (besides programmatically sending a mouseevent to the HTML select).

更新

• 我的同事在真实的 iOS 设备上进行了测试，他报告说下拉菜单工作正常，但在 iOS 上，用户没有看到类似于桌面上的下拉窗口:

---

Best Answer-推荐答案

问题似乎是使用 FormStone Selecter plugin 进行选择的结果(v2.2.3)，它大概使用 jQuery 来处理点击，it seems Android now treats as a security threat and does not allow .

为了解决这个问题，我让我的 Web.py(Python Web 框架)模板文件查看用户代理字符串，如果出现“android”，它会将 selects 的类设置为“form-control”(一个 Bootstrap class)，从而让 Bootstrap 为选择设置样式，如果用户代理字符串中的“android”not，它将照常使用 FormStone Selecter 插件。

所以，澄清一下:尽管我认为选择使用 Bootstrap 并且 Bootstrap 不起作用，但事实证明选择没有使用 Bootstrap，并且 Bootstrap v3.0.3 选择了 < em>确实在 Android 上工作。

关于android - Bootstrap 下拉菜单在 Android 上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52799817/