检测浏览器是否将 <select multiple> 显示为模态对话框答案

【问题标题】：Detect whether browser shows <select multiple> as modal dialog检测浏览器是否将 <select multiple> 显示为模态对话框
【发布时间】：2011-10-08 00:46:01
【问题描述】：

有没有办法使用 JavaScript 来检测给定的浏览器是否将焦点 <select multiple> 元素呈现为弹出窗口或仅作为内联框？

在某些平台上，例如 Android 浏览器和 iOS Safari，可以通过比较例如的高度来检测弹出窗口的使用，例如，

<select multiple>
  <option>a</option>
  <option>a</option>
  <option>a</option>
  <option>a</option>
  <option>a</option>
<select>

和

<select multiple>
  <option>a</option>
<select>

高度相同，因为<select>s 被缩小为带有下拉按钮的单个框。但在其他设备上，例如 Playbook，此测试会给出假阴性，因为 Playbook 浏览器会呈现展开的选择列表并且在单击它们时会显示弹出窗口。

谁能想到一种可靠的方法来确定是否显示原生选择弹出窗口？

【问题讨论】：

为什么要检测这个？如何渲染这样的组件取决于客户端，而不是您。除非您有非常具体的原因，否则您应该不理会这种行为。
我正在使用 jQuery Mobile 开发一个项目，并试图想出一个替代 jQuery Mobile 的 select menus 演示文稿的方法。他们显示选择选项的本机方法在不显示弹出窗口的浏览器中不起作用，而两个样式版本的性能相当差。我希望能够始终使用原生控件，使用原生弹出窗口或假覆盖。
注意select的size选项。如果这是“1”，浏览器可能会将元素呈现为内联元素。
对于这样的事情，我可能会检测浏览器本身并为每个浏览器（Android、iOS、WebOS 等）创建特定条件。
同意masedesign。您可以设置一些正则表达式来获取浏览器和操作系统，然后对不同的行为进行硬编码，但是每次您尝试混合原生控件和渲染控件时都会遇到麻烦。一个经典的例子是 AWT、Swing、SWT。

标签： javascript html select cross-browser browser-feature-detection

【解决方案1】：

看起来 masedesign 正在朝着这个方向发展，但我要更进一步：

也许检测移动浏览器 vs 非移动浏览器（例如RIM、Android、iOS等VS FF、Chrome、Opera、Safari、IE 等）

【讨论】：

【解决方案2】：

jQuery Mobile Beta 2 让您可以选择使用自定义菜单而不是原生菜单：

http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/forms/selects/index.html

【讨论】：

自他们的第一个 alpha 版本以来，这一直是一个选项。但是，正如我在上面的评论中提到的那样，问题是即使在最快的移动设备（例如 iPad 2）上，大型自定义菜单的性能也相当差，所以我试图提出某种混合原生/自定义替代方案.

【解决方案3】：

截至 2021 年，使用指针媒体功能（请参阅 https://stackoverflow.com/a/52854585/13065068）可能是检测浏览器是否可能在模式中打开选择的更可靠方法之一。

【讨论】：