如何用JavaScript区分PC与iOS设备的多选下拉框渲染方式？

初始问题 #

我的Web应用中有一个包含100个选项的<select multiple>多选下拉框，在PC端测试时体验糟糕：用户需要滚动浏览完整列表，还得通过Ctrl+点击的方式完成多选，操作成本很高。

针对PC端的优化 #

为了改善PC端交互，我将功能改为通过按钮唤起模态对话框，采用双列表布局——用户可以按需逐个移动选项来完成多选，这个方案在PC端的体验友好了很多。

移动端适配冲突 #

但在iPad或iPhone设备上，原生<select multiple>的表现完全不同：它仅显示单个条目，点击后会弹出带复选框的列表，这种原生交互的体验其实很好；反而我新做的双列表模态框在移动设备上表现不佳。

待解决的需求 #

我当时有两个方向的需求：

• 希望通过JavaScript准确判断当前浏览器对多选下拉框的渲染类型：是PC端的多值显示框，还是iOS设备那种带复选框的弹出列表
• 同时在考虑是否要统一界面，让所有平台的用户都通过按钮唤起带复选框列表的模态框进行选择

最终解决方案（更新） #

最后我选择直接用一系列复选框来实现该功能，现在这个功能在所有平台上的表现完全一致。

内容的提问来源于stack exchange，提问作者Paul Taylor