Tuesday, November 15, 2016

Detect if the user is using an IPad to login to Salesforce browser version

Use Case

To detect if the user is using an IPad to login to Salesforce browser version.

If so then proceed with a different message/flow compared to desktop version.

Solution

Below is a simple JavaScript to check the userAgent for a specific string that identifies if a mobile device has been used to access the page.

This JavaScript can be invoked from your VF page.

The mobile function is generic to detect mobile devices. The remaining functions are more OS/browser specific.

Reusable Code

Javascript:

var isDevice = {
    Mobile: function() {
        return navigator.userAgent.match(/Mobi/i);
    },
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BB: function() {
        return navigator.userAgent.match(/BlackBerry|BB10/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    }
};


Example:
Below is an example how the Javascript can be used.

Create a visualforce page with the below code. On window load this page will check the device and display the corresponding message.

<apex:page >
<script language="javascript">
var message = '';
var isDevice = {
    Mobile: function() {
        return navigator.userAgent.match(/Mobi/i);
    },
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BB: function() {
        return navigator.userAgent.match(/BlackBerry|BB10/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    }
};

window.onload = function(){
    if(isDevice.Mobile() ) message = 'Mobile';
    else message = 'Non mobile';
   
    if( isDevice.iOS() ) message += ('-iOS');
    else if( isDevice.Android() ) message += '-Android';
    else if( isDevice.BB() ) message += '-BB';
    else if( isDevice.Opera() ) message += '-Opera';
    else if( isDevice.Windows() ) message += '-Windows';

 alert('You are using a ' + message + ' device.');  
}
</script>

</apex:page>

No comments:

Post a Comment