5

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?

1
15

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

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

Hope that helps

5

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.

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.