普通 <select> 元素与在移动设备上呈现的 Bootstrap 的下拉元素

Question

今天我学到了一些新东西，<select> 元素在桌面和移动浏览器上呈现完全不同。我以前没有使用过它的问题以及我做过的几乎所有事情都是使用 Bootstrap 的元素。 所以我的问题实际上是以下两个问题：

1. 为什么当我在移动模式下调试时，<select> 标记在移动 chrome 和桌面 chrome 上呈现不同？这是预期的行为还是我可以将其视为错误？例如，从桌面浏览器在开发移动模式和硬件设备上打开以下页面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 设备模式不模拟特定于移动设备的 UA 处理表单元素。这实际上非常棘手，因为这些东西是为该平台构建编译的。

最好的办法是知道会有不同。在选择元素的情况下，它真的无关紧要。由于移动端 UX 是一个全屏滚动选择器。

一如既往，绝对最好的做法是使用设备模式作为指导。它不是绝对的，也不是绝对的。您将始终需要进行设备测试以验证一切是否按预期工作。 DM 可以让您顺利完成 85-90% 的路程。