在Salesforce闪电Web组件中，我如何找到我是使用Salesforce移动应用程序还是移动浏览器

Question

我们可以通过使用LWC的'@salesforce/client/formFactor'模块获得设备的大小和类型。但我怎么能得到，如果我在移动应用程序或移动浏览器在LWC工作。

我相信上述模块将始终给予小的形式因素，因为两者都在移动设备，所以是否有任何其他模块或任何JS的方式来找到如果我在移动应用程序或移动浏览器上工作。

Answer 1

经过一番研究，发现"@salesforce/client/formFactor"模块将返回大，即使页面在移动浏览器中打开。在移动应用程序的情况下，FORM_FACTOR将是"small"这可以用来识别这是移动浏览器还是移动应用程序。

import { LightningElement } from 'lwc';
import FORM_FACTOR from '@salesforce/client/formFactor';
export default class DeviceSelection extends LightningElement {
largeSlotChangeHandler() {
const largeDiv = this.template.querySelector('.largeDevice');
FORM_FACTOR.toLowerCase() === 'large' ? largeDiv.classList.remove('slds-hide'): '' ;
}
mediumSlotChangeHandler() {
const mediumDiv = this.template.querySelector('.mediumDevice');
FORM_FACTOR.toLowerCase() === 'medium' ? mediumDiv.classList.remove('slds-hide'): '' ;
}
smallSlotChangeHandler() {
const smallDiv = this.template.querySelector('.smallDevice');
FORM_FACTOR.toLowerCase() === 'small' ? smallDiv.classList.remove('slds-hide'): '' ;
}   
}

HTML文件可以是

<template>
<div class="largeDevice slds-hide">
<slot name="large" onslotchange={largeSlotChangeHandler}></slot>
</div>
<div class="mediumDevice slds-hide">
<slot name="medium" onslotchange={mediumSlotChangeHandler}></slot>
</div>
<div class="smallDevice slds-hide">
<slot name="small" onslotchange={smallSlotChangeHandler}></slot>
</div>
</template>

然后这可以有条件地用于不同的设备:

<c-device-selection>
<div slot="large">
Show this message for only large device.
</div>
<div slot="medium">
Show this message for only medium devices.
</div>
<div slot="small">
Show this message for only small devices.
</div>
</c-device-selection>