Проблема
Если вы перейдете на https://oorkle.com/browse из браузера настольного компьютера и посмотрите на левую сторону, вы увидите фильтр / боковую панель, которая использует выпадающие списки Bootstrap, и вы увидитечто они работают (они выпадают):
Если вы достаточно сузите представление, некоторый jQuery переместит эти выпадающие списки во вторичную верхнюю панель навигации, ноони все еще будут работать (они выпадут):
Теперь, если вы попробуете те же самые вещи при загрузке страницы с Androidили iOS (iPhone или iPad), вы увидите, что выпадающие списки больше не работают:
HTML
Если вы измените HTML-версию настольной версии и HTML-код версии Android / iOS , вы увидите только незначительные различия CSS:
Если вы diff живыеHTML (с изменениями из JavaScript) ,единственное реальное отличие от разницы выше, которую вы увидите, это то, что класс mobile был добавлен к каждому селектору:
Что я пробовал
- Если вы попробуете опцию
Responsive в Chrome Devtools, который использует строку Android User-Agent Android, выпадающие списки не будут работать, независимо от ширины страницы, когда оназагружает. - Я попытался настроить сервер так, чтобы он обслуживал идентичный HTML для версий страницы для настольных ПК и Android / iOS, и я вижу то же поведение: раскрывающиеся списки рабочего стола работают, иРаскрытия в 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каким-то образом, что приводит к тому, что раскрывающийся список не работает.
Связанные проблемы, которые я обнаружил в Интернете
- Я гуглил и нашел эту страницу документации Bootstrap и этот вопрос SO но, хотя они кажутся чем-то связанными (в том, что они связаны с ошибками в строке агента пользователя), они, похоже, не решают мою проблему.
- GoogleЭлемент Chrome для Android
- Похоже, у этого человека возникла та же проблема: Простой выбор HTML не работает на Android Chrome
- 2016.09.21 - GoogleСправочный форум Chrome - опция выбора не работает при новом обновлении chrome
Вполне вероятно, что ваша библиотека (или ваш код) обрабатывает первый щелчок, имитируя второй щелчок программным образом в HTML-выборе, когда пользователь щелкаетна внешнем элементе.
Программный / сценарий mouseevent считается «ненадежным», и событие по умолчанию не будет обработано.Ака, выбор не будет расширен, и пользователь должен щелкнуть снова.
Если вы используете библиотеку, которая предоставляет весь виджет (некоторый элемент + выбор HTML), попробуйте обновить вашу библиотеку до последней версии, чтобыпосмотрите, не используют ли они другой подход (помимо программной отправки события мыши для выбора HTML).
Обновления
- У меня был коллегиальный тест на реальном устройстве iOS, и он сообщил, что раскрывающиеся списки работали должным образом, но на iOS пользователь не отображает раскрывающееся окно, похожее на то, что на рабочем столе:
