Элемент равный <select> Элемент vs Элемент выпадающего элемента Bootstrap, отображаемый на мобильном устройстве

Question

Сегодня я узнал что-то новое, что элемент <select> визуализировался полностью на рабочем столе и мобильном браузере. Проблема, что я не использовал ее раньше и почти все, что я сделал, - это использовать элементы Bootstrap. Так что мой вопрос, на самом деле 2 вопроса следующий:

1. Почему <select> тега оказывается по-разному на мобильных хромой и настольных хромом, когда я отладку в мобильном режиме? Является ли это предполагаемым поведением, или я могу считать его ошибкой? Например, откройте следующую страницу http://www.w3schools.com/tags/tag_select.asp из настольного браузера в режиме мобильного устройства и на аппаратном устройстве, вы увидите разницу.

2. Каков наилучший подход для обеспечения согласованности между различными устройствами? Могу ли я быть уверенным, что во всех новых мобильных устройствах <select> будет отображаться «по-мобильному» или просто реализовать мой собственный элемент выбора на основе Bootstrap modal в сочетании с List group, как я сделал здесь: http://codepen.io/anatoly314/pen/EPBmrM?editors=1010?

Answer 1

Режим устройства DevTools не эмулирует обработку данных элементов формы для мобильных устройств. Это действительно очень сложно сделать, поскольку эти вещи скомпилированы для этой сборки платформы.

Лучшее, что нужно сделать, это знать, что будет разница. В случае элементов выбора это действительно не имеет большого значения. Поскольку мобильный UX является полноэкранным селектором прокрутки выбора.

Абсолютно лучше всего, как всегда, использовать режим устройства в качестве ориентира. Он не является абсолютным и не может быть. Вам всегда нужно проводить тестирование на устройстве, чтобы убедиться, что все работает так, как ожидалось. DM просто дает вам 85-90% пути без проблем.