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");