How to find viewing device in Salesforce Lightning Web Component?

How to find viewing device in Salesforce Lightning Web Component?

import FORM_FACTOR from ‘@salesforce/client/formFactor’ can be used to find the viewing device in Salesforce Lightning Web Component.

  1. Large – Desktop Device
  2. Medium – iPad Device
  3. Small – iPhone Device

Sample Lightning Web Component:

HTML:

<template>
    <lightning-card>
        <div class="slds-p-around_medium">
            Current viewing device is <b>{formFactor}</b>
        </div>
    </lightning-card>
</template>

JavaScript:

import { LightningElement } from 'lwc';
import FORM_FACTOR from '@salesforce/client/formFactor';

export default class SampleLightningWebComponent extends LightningElement {

    formFactor = FORM_FACTOR;

}

js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Output:

To Hide and Show in Salesforce Lightning Web Component based on viewing Device, please check the following:

Leave a Reply