平原< select>元素与在移动设备上呈现的Bootstrap的下拉菜单元素 [英] Plain <select> element vs Bootstrap's dropdown element rendered on mobile device

问题描述

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

Today I've learnt something new, that <select> element rendered completely different on a desktop and mobile browser. The problem that I haven't use it before and almost all stuff I've done, is by using Bootstrap's elements. So my question is actually 2 questions are following:

1. 为什么< select& 在移动模式下调试时，移动Chrome和桌面Chrome上的标签呈现不同？是意图行为还是我可以认为它是错误？例如，打开以下页面 http://www.w3schools.com/tags/tag_select.asp

1. Why <select> tag rendered differently on mobile chrome and desktop chrome when I debugging in mobile mode? Is it intended behaviour or I can consider it as bug? For example open following page http://www.w3schools.com/tags/tag_select.asp from desktop browser in dev mobile mode and on a hardware device, you will see the difference.

在各种设备上实现一致性的最佳方法是什么？我可以确保在所有新的移动设备< select> 将被渲染移动方式，或只是实现我自己的选择元素基于 Bootstrap modal 与列表组，如我在这里所做的那样： http：// codepen.io/anatoly314/pen/EPBmrM?editors=1010 ？

What is the best approach to achieve consistency across various devices? Can I be sure that in all new mobile devices <select> will be rendered "in a mobile way", or just implement my own select element based on Bootstrap modal combined with List group as I've done here: http://codepen.io/anatoly314/pen/EPBmrM?editors=1010 ?

推荐答案

DevTools设备模式不会模拟移动设备元素。这实际上很棘手，因为那些东西是编译的平台构建。

DevTools Device Mode does not emulate mobile-specific UA handling of form elements. This is actually very tricky to do since those things are compiled for that platform build.

最好的事情是知道会有一个区别。在选择元素的情况下，它并不重要。因为移动UX是一个全屏滚动选择器的选择。

The best thing to do is know there will be a difference. In the case of select elements it really doesn't matter much. Since the mobile UX is a full screen scroll selector of the choices.

绝对最好的东西，一如既往，使用设备模式作为指南。它不是绝对的，也不可能是。您将始终需要进行设备上测试，以验证一切是否按预期工作。 DM只需要85-90％的路，没有问题。

The absolute best thing, as always, is use Device Mode as a guideline. It is not absolute nor can it be. You will always need to do on-device testing to verify everything works as expected. DM simply gets you 85-90% of the way there without issue.

这篇关于平原< select>元素与在移动设备上呈现的Bootstrap的下拉菜单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！