Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<lightning:card title="Detect Your Device" class="slds-m-around_large">
<aura:set attribute="actions">
<lightning:button label="Browser Info" onclick="{!c.browse}" />
<div class="slds-p-horizontal_medium">
<aura:if isTrue="{!$Browser.formFactor == 'DESKTOP'}">
<p>You are using Desktop <lightning:icon iconName="utility:desktop" alternativeText="Desktop!" variant="error"/> Browser </p>
<aura:if isTrue="{!$Browser.formFactor == 'PHONE' || $Browser.isPhone}">
<p>You are using Desktop <lightning:icon iconName="utility:phone_portrait" alternativeText="Phone!" variant="error"/> Browser </p>
<aura:if isTrue="{!$Browser.formFactor == 'TABLET ' || $Browser.isTablet}">
<p>You are using Tablet <lightning:icon iconName="utility:tablet_portrait" alternativeText="Tablet!" variant="error"/> Browser </p>
<aura:if isTrue="{!$Browser.isIPad || $Browser.isTablet}">
<p>You are using IPad <lightning:icon iconName="utility:tablet_portrait" alternativeText="Tablet!" variant="error"/> Browser </p>
<aura:if isTrue="{!$Browser.isIPhone}">
<p>You are using IPhone <lightning:icon iconName="utility:phone_portrait" alternativeText="Tablet!" variant="error"/> Browser </p>
<aura:if isTrue="{!$Browser.isAndroid || $Browser.isPhone}">
<p>You are using Android phone <lightning:icon iconName="utility:phone_portrait" alternativeText="Tablet!" variant="error"/> Browser </p>
<aura:application extends="force:slds" >
<c:DetectMyDevice />
browse : function(component, event, helper) {
//$A - global aura namespace, get method returns the value referenced
var device = $A.get("$Browser.formFactor");
alert("You are using a " + device);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment