How To Detect a Device In Salesforce Lightning Component ?

In some of our use cases, we might have to know the device that user is in. This post explains how we can detect a device in Lightning Component.

The $Browser global value provider returns information about the hardware and operating system of the browser accessing the application.

{!$Browser.isTablet}      > To detect the tablet device
{!$Browser.isPhone}      > To detect the user is in Mobile Phone / mobile browser
{!$Browser.isAndroid}   > To detect the user is in Android device
{!$Browser.formFactor} > Returns a FormFactor enum value based on the type of hardware the browser is                                                            running on.

DESKTOP for a desktop client
PHONE for a phone including a mobile phone with a browser and a smartphone
TABLET for a tablet client (for which isTablet returns true)

Example:

Create a new lightning component : DetectMyDevice.cmp

<aura:component>

    <aura:if isTrue="{!$Browser.isTablet}">
    	You are using a tablet device 
        ( <lightning:icon iconName="utility:tablet_portrait" size="x-small" alternativeText="Indicates approval"/> ).
    </aura:if>
    <aura:if isTrue="{!$Browser.isPhone}">
        You are using a phone 
        ( <lightning:icon iconName="utility:phone_portrait" size="x-small" alternativeText="Indicates approval"/> ).
        This message is rendered using isPhone <br />
    </aura:if>
    <aura:if isTrue="{!$Browser.isIPhone}">
        You are using an IPhone, If it is IPhone X, _/\_ <br />
    </aura:if> 
    <aura:if isTrue="{!$Browser.formFactor == 'DESKTOP'}">
    	You are using a DESKTOP 
        ( <lightning:icon iconName="utility:desktop" size="x-small" alternativeText="Indicates approval"/> )
        Browser device
    </aura:if>
    <aura:if isTrue="{!$Browser.formFactor == 'PHONE'}">
    	You are using a Phone, This message is rendered using formFactor
    </aura:if>
    <aura:if isTrue="{!$Browser.formFactor == 'TABLET'}">
    	You are using a Table device
    </aura:if>
</aura:component>

Create a Lightning Application (DetectMyDeviceApp.app)

<aura:application extends="force:slds">
    <c:DetectMyDevice />
</aura:application>

Output:

To detect a device in JavaScript controller:

var device = $A.get("$Browser.formFactor");

Check Also : How to Use Design Resource In Lightning Component Bundle?

Resources:

Lightning Developer Guide

About The contributor: 

• Brahmaji Tammana

  10 Post Contribute