How to detect whether salesforce lightning app is running on a mobile browser or desktop browser?

Question

We have salesforce lightning app which runs on both mobile and desktop. Need to write some code only for mobile application. How to detect whether app is running on a mobile browser or desktop browser? I used following code but its not working:

checkMobileBrowser: function(component){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
        return true;        
    }else{
        return false;
    }
}

score 3 · Answer 1 · answered Apr 25 '17 at 16:10

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

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)

Ctrl

({
    checkBrowser: function(component) {
        var device = $A.get("$Browser.formFactor");
        alert("You are using a " + device);
    }
})
Component

<aura:component>
        {!$Browser.isTablet}
        {!$Browser.isPhone}
        {!$Browser.isAndroid}
        {!$Browser.formFactor}
    </aura:component>

By using this way you can determine

Resource: http://www.janbask.com/salesforce-lightning

score 2 · Answer 2 · answered Jun 17 '16 at 16:38

You can also use the $Browser global value provider:

function checkMobileBrowser(){ 
   return $A.get("$Browser.formFactor") !== "DESKTOP"
}

This will ensure that your detection matches what the application uses, if your component is ever embedded in S1 or SFX, and everything will switch on the same logic.

$Browser is also available in component markup:

<aura:if "{!$Browser.formFactor !== 'DESKTOP'}">
   <component/>
</aura:if>

You might want to search the documentation for $Browser, because it allows for very granular hardware detection, and there might be something else for your specific use case.

https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf

Hleb · Answer 3 · 2016-06-20T08:12:58.720

you can write JavaScript function for validation of browser's user agent:

function detectmob(){ 
    if(navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
            || navigator.userAgent.match(/Windows Phone/i)){
        return true;
    }else{
        return false;
    }
}

How to detect whether salesforce lightning app is running on a mobile browser or desktop browser?

3 Answers3