How To Detect a Device In Salesforce Lightning Component ?
{!$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.
DetectDevice.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>
<aura:application extends="force:slds">
<c:DetectDevice />
</aura:application
var device = $A.get("$Browser.formFactor");