Bootstrap下拉菜单在Android上不起作用 [英] Bootstrap dropdowns not working on Android

问题描述

问题

如果您从台式机浏览器访问

如果您缩小视图的范围，某些jQuery会将这些下拉列表移动到第二个顶部导航栏中，但它们仍将起作用(它们将下拉):

---

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

---

HTML

如果您

---

如果您

---

我尝试过的事情

• 如果您尝试使用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类可能已更改.
• 我已经在实际的Android设备上进行了尝试，以确认它确实在发生，而不仅仅是Chrome Devtools错误.
• 我曾尝试将网站从Bootstrap v3.0.3更新到最新的v3，v3.3.7，但似乎没有任何作用.

---

我对正在发生的事情

在我看来，Bootstrap使用了用户代理字符串，导致下拉列表无法正常工作.

---

我在网上发现的相关问题

• 我用Google搜索并找到了

解决方案

似乎问题出在使用似乎Android现在已将其视为安全威胁，并且不允许.

为解决此问题，我让我的Web.py(Python Web框架)模板文件查看了用户代理字符串，如果出现"android"，它将selects的类设置为"form-control"(一个Bootstrap类)，然后让Bootstrap样式进行选择，如果用户代理字符串中的"android"不是 ，它将照常使用FormStone Selecter插件.

因此，需要澄清的是:尽管我认为选择使用的是Bootstrap，并且Bootstrap无效，但事实证明选择不是使用Bootstrap的，而Bootstrap v3.0.3选择了 do 在Android上运行.

The problem

If you go to https://oorkle.com/browse from a desktop browser and look at the left-hand side you will see a filter/sidebar that uses Bootstrap dropdowns, and you'll see that they work (they drop down):

If you narrow the view enough, some jQuery will move those dropdowns into the secondary top navbar, but they will still work (they'll drop down):

---

Now, if you try these same things while loading the page from Android or iOS (iPhone or iPad), you'll see that the dropdowns no longer work:

---

The HTML

If you diff the HTML of the desktop version and the HTML of the Android/iOS version, you'll see only minor CSS differences:

---

If you diff the live HTML (with modifications from JavaScript), the only real difference from the diff above you'll see is that a mobile class has been added to each selector:

---

What I've tried

• If you try the Responsive option in Chrome Devtools, which uses an Android User-Agent string, the dropdowns will not work, regardless of how wide the page is when it loads.
• I have tried configuring the server to serve identical HTML for the desktop and Android/iOS versions of the page, and I see the same behavior: the desktop dropdowns work, and the Android/iOS dropdowns don't work.
• I've tried using Chrome Devtools to remove the mobile class from the selectors and that doesn't seem to have any effect (the dropdowns still don't appear).
• The website is using Boostrap v3.0.3. If I replace the v3.0.3 bootstrap.js file with the latest v4.1.3 bootstrap.js file it still doesn't work, but I'm not sure if it ever would be expected to or if the CSS classes may have changed.
• I have tried this on an actual Android device to confirm that it's really happening and not just a Chrome Devtools bug.
• I tried updating the website from Bootstrap v3.0.3 to the latest v3, v3.3.7, but it seems to have had no effect.

---

My guess at what's happening

It seems to me that the user agent string is being used by Bootstrap in some way which is causing the dropdown to not work.

---

Related issues I've found online

• I Googled and found this Bootstrap documentation page and this SO question but while they seem somewhat related (in that they involve bugs with the user agent string), they don't seem to solve my problem.
• Google Chrome for Android <select> element doesn't select any option
• This person seems to be encountering the same issue: 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).

Updates

• I had a colleague test on a real iOS device and he reported that the dropdowns were working properly, but that on iOS the user isn't shown a dropdown window that looks like the one on desktop:

解决方案

It seems the issue is a result of the selects using the FormStone Selecter plugin (v2.2.3), which presumably uses jQuery to handle the clicks, which it seems Android now treats as a security threat and does not allow.

To solve the problem I had my Web.py (Python web framework) template file look at the user agent string, and if "android" appeared, it would set the selects' class to "form-control" (a Bootstrap class), thus letting Bootstrap style the selects, and if "android" was not in the user agent string it would use the FormStone Selecter plugin as usual.

So, to clarify: despite my thinking that the selects were using Bootstrap and that Bootstrap was not working, it turns out that the selects were not using Bootstrap, and that Bootstrap v3.0.3 selects do work on Android.

这篇关于Bootstrap下拉菜单在Android上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！