javascripthtmlselectresponsive-design

How to determine if using iPhone 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 doesn't 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 initial 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 doesn't 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/iPhone). In JavaScript how do I accurately determine this?

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 ?

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