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

Question

今天我已经学到了新东西，＆lt; select＆gt;元素在桌面和移动浏览器上呈现完全不同。我之前没有使用它的问题以及我所做的几乎所有事情都是使用Bootstrap的元素。 所以我的问题实际上是2个问题如下： 为什么＆lt; select＆gt;我在移动模式下调试时，移动Chrome和桌面Chrome上的标签呈现方式不同？它是预期的行为还是我可以将其视为错误？例如，在开发移动模式和硬件设备上从桌面浏览器打开以下页面http://www.w3schools.com/tags/tag_select.asp，您将看到不同之处。 在各种设备上实现一致性的最佳方法是什么？我可以确定在所有新移动设备中＆lt; select＆gt;将以移动方式呈现＆＃34;＆＃34;或者只是实现我自己的基于Bootstrap模式和List组的select元素，如我在这里完成的：http：//codepen.io/anatoly314/pen / EPBmrM？editors = 1010？

Answer 1

DevTools设备模式不会模拟表单元素的特定于移动设备的UA处理。这实际上非常棘手，因为那些东西是为该平台构建编译的。

最好的办法是知道会有所不同。对于选择元素，它实际上并不重要。由于移动UX是选择的全屏滚动选择器。

一如既往，绝对最好的方法是使用设备模式作为指导。它不是绝对的，也不是。您将始终需要进行设备上测试以验证一切是否按预期工作。 DM只会让你在没有问题的情况下获得85-90％的分数。