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

标签 css twitter-bootstrap drop-down-menu google-chrome-devtools mobile-website

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

  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

最佳答案

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

最好的办法就是知道会有不同。在选择元素的情况下,它真的无关紧要。由于移动用户体验是全屏滚动选择器。

一如既往,绝对最好的做法是使用设备模式作为指导。它不是绝对的,也不可能是。您将始终需要进行设备上测试以验证一切都按预期工作。 DM 只会让您毫无问题地完成 85-90% 的任务。

关于css - 在移动设备上呈现的普通 <select> 元素与 Bootstrap 的下拉元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35758599/

相关文章:

php - 在数组中协商数组

html - 如何使 CSS 文件比另一个 CSS 文件更重要?

javascript - 根据当前 url 激活选项卡

javascript - 如何在下拉选择中禁用某些选项?

html - CSS:下拉菜单未正确选择;边距间距?

javascript - 通过将鼠标悬停在另一个图像上来隐藏动画图像

javascript - 如何在 onmouseout 事件中将背景颜色更改为透明?

twitter-bootstrap - 在同一行混合按钮组和输入组

jquery - bootstrap contact_me 从另一个按钮提交

c# - 下拉枚举