我如何确定是否使用手机或ipad来处理不同的选择

Question

我的 Web 应用程序有一个多选字段，但它由 100 个值组成，因此在我的 PC 上测试时，必须使用滚动来查看整个列表，并按住 Control 单击来选择多个值，这并不容易使用。

因此，我将我的应用程序更改为有一个按钮，可以打开一个模式对话框，然后有两个列表，这样您就可以更好地看到条目，如果愿意，您可以一次移动一个，界面更加宽容。

但是，在使用初始方法的 iPad 或手机上，选择的工作方式有所不同。它只是在选择框中显示一个条目，然后选择会弹出一个列表，每个条目都带有一个复选框，实际上这工作得很好。但新方法对于iPad、Phone来说并不适用。

所以我只是希望能够准确识别用户浏览器是否会显示具有多个值的多选选择框（pc）或带有复选框的列表（ipad/手机）。在javascript中我如何准确地确定这一点。

或者，我应该更改界面，以便在所有情况下用户都选择一个按钮，然后弹出一个模式对话框，其中包含带有用户可以选择/取消选择的复选框的字段列表？

Answer 1

检测设备是iPad/iPhone还是PC常用的方法是检查

navigator.userAgent

。您可以在脚本中使用它：

function isMobileDevice() {
  return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
}

window.onload = function() {
  if (isMobileDevice()) {
    // Display list with checkboxes for iPad/iPhone
  } else {
    // Display display multi-select select as box for PC
  }
}