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

Posted 2023-03-12

【中文标题】Bootstrap 下拉菜单在 Android 上不起作用

【英文标题】：Bootstrap dropdowns not working on Android

【发布时间】：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.3 bootstrap.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 选择） .

更新

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

【问题讨论】：

你已经修复了吗？它对我有用，我正在复制你所做的。

@TomDickson 不，当我使用 Chrome Devtools 模拟 Android / iOS 设备时，它仍然不适合我。

你试过清除 chrome 中的缓存吗？您是否也尝试过其他浏览器？

@TomDickson 我将 Devtools 设置为不使用缓存。根据您的建议，我刚刚在 Firefox 开发者版中尝试过，但仍然看不到下拉菜单，但是因为我的同事向我展示了在 iOS 上选择值的显示方式不同（它们出现在底部的 iOS 特定 UI 中手机屏幕），我怀疑我可能需要使用模拟器来查看使用不同的浏览器是否会有所不同。

【参考方案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”not，它将照常使用 FormStone Selecter 插件。

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