普通<选择>移动设备上呈现的元素与 Bootstrap 的下拉元素 [英] Plain &lt;select&gt; element vs Bootstrap&#39;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. 为什么当我在移动模式下调试时 标签在移动版 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.

   在各种设备之间实现一致性的最佳方法是什么?我可以确定在所有新的移动设备中

   将以移动方式"呈现，或者只是基于 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 设备模式不会模拟特定于移动设备的 UA 处理表单元素.这实际上非常棘手，因为这些东西是为该平台构建编译的.

   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.

   最好的办法是知道会有区别.在选择元素的情况下，它真的没有多大关系.由于移动用户体验是选项的全屏滚动选择器.

   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.

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