Bootstrap下拉列表不适用于Android

Question

问题

如果您从台式机浏览器转到https://oorkle.com/browse，然后在左侧查看，则会看到一个使用Bootstrap下拉菜单的过滤器/边栏，您会看到它们起作用（它们下拉菜单）：

如果您将视图缩小得足够狭窄，则某些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类：

---

我尝试过的

• 如果您尝试使用Android User-Agent字符串在Chrome Devtools中使用Responsive选项，则无论页面加载时的宽度如何，下拉菜单均不起作用。
• 我尝试将服务器配置为为页面的桌面版和Android / iOS版提供相同 HTML，并且我看到了相同的行为：桌面下拉菜单有效，而Android / iOS下拉菜单有效不起作用。
• 我尝试使用Chrome Devtools从选择器中删除mobile类，但这似乎没有任何效果（下拉菜单仍然没有出现）。
• 该网站正在使用Boostrap v3.0.3。如果我将v3.0.3 bootstrap.js文件替换为最新的v4.1.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

    

  当用户单击外部元素时，您的库（或代码）可能会通过以编程方式模拟HTML select上的第二次单击来处理第一次单击。

       

  程序化/脚本化鼠标事件被视为“不可信”，并且不会处理默认事件。再次，选择将不会扩展，用户必须再次单击。

       

  如果您使用的库提供了整个小部件（某些元素+ HTML select），请尝试将您的库更新为最新版本，以查看他们是否采用了另一种方法（以编程方式将mouseevent发送给HTML select）

更新

• 我在真实的iOS设备上进行了同事测试，他报告下拉菜单正常运行，但是在iOS上，用户未看到类似于桌面上的下拉窗口：

Answer 1

似乎问题出在使用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类），然后让Bootstrap样式进行选择，并且如果用户代理字符串中的“ android”不是 ，它将照常使用FormStone Selecter插件。

因此，需要澄清一下：尽管我认为选择使用的是Bootstrap，并且Bootstrap无法正常工作，但事实证明选择不是使用Bootstrap的，而Bootstrap v3.0.3选择了< em> do 在Android上工作。