Tech Evangel

Lightning mainly focuses on the user experience on the web and mobile interfaces. So, most of the scenarios we should need to know the information of the browser to align the design with respect to the device browser.  In this post, I would like to discuss, how we can detect the browsing device information in a lightning component.

To address this issue, we can use $Browser global value provider.  The $Browser global value provider returns information about the hardware and operating system of the browser accessing the application.

• {!$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)
• {!$Browser.isTablet}
  • Return true if the browser is running on an iPad or a tablet with Android 2.2 or later otherwise false
• {!$Browser.isPhone}
  • Return true if the browser is running on a phone including a mobile phone with a browser and a smartphone otherwise false
• {!$Browser.isAndroid}
  • Return true if the browser is running on an android device, otherwise false
• {!$Browser.isIOS}
  • Return true if the browser is running on an IOS device, otherwise false
• {!$Browser.isIPhone}
  • Return true if the browser is running on an iPhone, otherwise false
• {!$Browser.isWindowsPhone}
  • Return true if the browser is running on a windows phone, otherwise false
• {!$Browser.isIPad}
  • Return true if the browser is running on an iPad, otherwise false

Example

You can check the same code in this git repository.

Don’t forget to share the post if you like it & bookmark the blog for future references. If you have any comments or doubts on this post, Please comment on the box below.

References

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_browser_value_provider.htm

https://github.com/anilsomasundaran/Detect-Browsing-Device