【发布时间】：2018-10-14 05:42:20
【问题描述】：
问题
如果您从桌面浏览器转到 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 类：
我尝试过的
- 如果您在 Chrome Devtools 中尝试使用 Android 用户代理字符串的
Responsive选项，下拉菜单将不起作用，无论页面加载时有多宽。 - 我尝试将服务器配置为为桌面和 Android/iOS 版本的页面提供 相同 HTML，我看到相同的行为：桌面下拉菜单正常工作，而 Android/iOS 下拉菜单不工作。
- 我尝试使用 Chrome Devtools 从选择器中删除
mobile类，但这似乎没有任何效果（下拉菜单仍然没有出现）。 - 该网站使用的是 Boostrap v3.0.3。如果我用最新的 v4.1.3
bootstrap.js文件替换 v3.0.3bootstrap.js文件，它仍然无法工作，但我不确定它是否会被预期或 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 选择上以编程方式模拟第二次点击来处理第一次点击。
程序化/脚本化的鼠标事件被认为是“不可信的”，不会处理默认事件。又名，选择不会被展开，用户必须再次点击。
如果您使用的库提供了整个小部件（某些元素 + 一个 HTML 选择），请尝试将您的库更新到最新版本，看看他们是否采用了另一种方法（除了以编程方式将鼠标事件发送到 HTML 选择） .
更新
【问题讨论】：
-
你已经修复了吗？它对我有用，我正在复制你所做的。
-
@TomDickson 不，当我使用 Chrome Devtools 模拟 Android / iOS 设备时，它仍然不适合我。
-
你试过清除 chrome 中的缓存吗？您是否也尝试过其他浏览器？
-
@TomDickson 我将 Devtools 设置为不使用缓存。根据您的建议，我刚刚在 Firefox 开发者版中尝试过，但仍然看不到下拉菜单，但是因为我的同事向我展示了在 iOS 上选择值的显示方式不同（它们出现在底部的 iOS 特定 UI 中手机屏幕），我怀疑我可能需要使用模拟器来查看使用不同的浏览器是否会有所不同。
标签： android html ios css twitter-bootstrap