I want to create a lightning component when run in desktop show one style when run in mobile show another style. Can I implementation this?

Thanks for your help and advice.

Best wishes, Lee


At least you can access the form factor of the hardware the browser is running on in LWC:

import formFactorPropertyName from '@salesforce/client/formFactor';

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

  • Large — A desktop client.
  • Medium — A tablet client.
  • Small — A phone client.

Depending on that value you can customize your styles, render components conditionally, etc. For instance you will be able to see this block only at desktop form factor:

    <div if:true={isDesktop}>
        I'm running in a desktop client
// test.js
import FORM_FACTOR from '@salesforce/client/formFactor';

export default class Test extends LightningElement {

    get isDesktop() {
        return FORM_FACTOR === 'Large';

For Aura Component you can access $Browser global value provider

    <aura:if isTrue="{!$Browser.formFactor === 'Desktop'">
        I'm running in a desktop client
| improve this answer | |
  • Hi Oleh, Thank you for your advice. It's work for me. Best wishes, Lee – GhostLee Aug 5 at 5:20
  • You're welcome, Lee. – Oleh Berehovskyi Aug 5 at 6:43

This is not exactly the answer but hopefully it can guide you to it. Try to explore the salesforce lightning design system. You won't be able to control if its desktop or mobile, but you'll be able to adapt the design based on the size of the screen ( which in my opinion can already give you an idea which type it is)

here is a link to help you with the Slds-size concept: https://www.lightningdesignsystem.com/utilities/sizing/

| improve this answer | |

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.