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/35541319/

相关文章:

html - 容器 div 内的 Bootstrap 表超出浏览器宽度

javascript - (阅读更多链接)到模态淡入淡出 View

jquery - 当 li 列表是绝对的并且下拉列表打开时,是否可以在底部强制显示最后一个 li 菜单内容?

c# - CustomValidator 未在控制中触发

html - 表内的绝对元素导致表启用 overflow-y : scroll somehow

CSS Position 固定下面的父伪元素

html - Css 转换在 Action View Rails 中不起作用

html - HTML 中的表格副标题

html - Twitter Bootstrap 粘性页脚和 Jade

JQuery 使用下拉菜单选择多个 Div