Forcesniffer.js | Device Detection in Salesforce, Salesforce1 and Lightning Experience

You probably should not have to find/detect device type unless you absolutely have to. In most of the cases, a good responsive design in UI can render behavior across different screen sizes.Though there are few edge cases in Salesforce development specially, where you want to redirect traffic to mobile specific page,detect device and even detect Salesforce1 Application itself.

I found an interesting discussion here, talking about multiple approaches for device sniffing, specially through javascript and css. Clearly both approaches are cool, but, while developing application oriented for salesforce1 mobile application, lightning experience, salesforce on safari/chrome in ipad and as well any other device, you still have to write script handler to detect those devices.I saw few cases very well covered by +Keir Bowden in this post here, where he explain the different context a user have to deal with, and sniff multiple cases.

Detecting with Javascript if Salesforce1

I thought of organizing all types of device detection techniques into one organized library that can detect mobile(all possible) devices and all possible salesforce context. Inspired by isMobile.js I compiled all logic a one place, which gave birth to ForceSniffer.js

 Simplified way of sniffing (User-Agent) including Salesforce

How to use ForceSniffer.js ?

Simply import forcesniffer.js in your visualforce page and call the methods as shown below to detect devices and context, you can also import forcesniffer.js as CDN from here

Check if Mobile

/* Smartphones ----------- */
//Check for all Phone
           if(isMobile.phone)
           {}

Check if Tablet

/* Smartphones ----------- */
//Check for all Tablet
           if(isMobile.tablet)
           {}

Check if Desktop

/* Smartphones ----------- */
//Check if Desktop 
           if(!isMobile.any)
           {}

Check if Salesforce1

/* Smartphones ----------- */
//Check if Salesforce1
           if(ForceUI.isSalesforce1())
           {}

Check if Lightning Experience

/* Smartphones ----------- */
//Check if Lightning Experience
           if(ForceUI.isLightingX())
           {}

Check if Visualforce Inside Saleforce

/* Smartphones ----------- */
//Check if Visualforce Inside Saleforce
           if(ForceUI.isVisualforceInside_Salesforce1())
           {}

Check if Visualforce inside Salesforce1 Classic

/* Smartphones ----------- */
//Check if Visualforce Inside Saleforce
           if(ForceUI.isVisualforceInside_SalesforceClassic())
           {}

Below the live example of using ForceSniffer on a visualforce Page

 Jump to Github