Is there an equivalent to $A.get("$Browser.formFactor") in LWC?

Question

We want to perform different logic in our LWC component js controller if the user is viewing our app in mobile.

With aura components, we could do:

if ($A.get("$Browser.formFactor") != 'DESKTOP') {
    //do something for mobile only here
}

How can we do this with LWC?

Answer 1

As of today, there is a lwc module that you can import to get it:

import formFactorPropertyName from '@salesforce/client/formFactor'

formFactorPropertyName—A name that refers to the form factor of the hardware running the browser. Possible values are:

1. Large—A desktop client.
2. Medium—A tablet client.
3. Small—A phone client.

Pass the form factor to the getRecordCreateDefaults wire adapter to get the default layout and object information for creating a record.

import { getRecordCreateDefaults } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import FORM_FACTOR from '@salesforce/client/formFactor';
 
@wire(getRecordCreateDefaults, { objectApiName: ACCOUNT_OBJECT, formFactor: FORM_FACTOR})
accountDefaults;

SOURCE: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_client_form_factor

Hope that helps

Answer 2

Edit Dec. 2020: Now available via @salesforce/client/formFactor import

---

No there is no equivalent of $Browser.formFactor Aura global value provider in LWC. The addition of an equivalent is under discussion.

For now, you can use CSS media queries and Element.getBoundingClientRect to make component adapt to the space available on the screen.

Answer 3

Yes. Please use import FORM_FACTOR from '@salesforce/client/formFactor'

The FORM_FACTOR can have below values based on the type of the device. Large - If the device is a desktop. Medium - If the device is a tablet. Small - A phone client