Search code examples
javascripthtmlselectresponsive-design

How do i determine if using phone or ipad that deals with select differently

My web application has a multiple select field, but it consists of 100 values and so when testing on my PC scrolling has to be used to see the whole list and control-click used to select multiple values, this doesnt make it very easy to use.

enter image description here

So I changed my application to have a button that brings up a modal dialog and then has two lists so you can just see the entries better and you can move one at a time if wish, the interface is more forgiving.

enter image description here enter image description here

However, on an iPad or phone with the inital method the select works in a different way. It just shows one entry in the select box and then selecting brings up a list each one with a checkbox, and actually this works fine. But the new method doesnt really work for iPad, Phone.

So i just want to be able to accurately identify if the users browser will display multi-select select as box with multiple values (pc) or a list with checkboxes (ipad/phone). In javascript how do i accuratly determine this please.

Or, should I change the interface so that in all cases the user selects a button, and then it brings up a modal dialog with list of fields with checkboxes that users can select/deselect ?

Edit:Update

In the end I decided to use a series of checkboxes instead and so it now works the same for all platforms

enter image description here

Solution

  • The commonly used method to detect if the device is iPad/iPhone or PC is to check the navigator.userAgent. You can use this in your script:

    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
  }
}