如何检测WASM平台部署的UNO App当前运行的设备类型？

1. 直接使用UNO内置设备类型API #

UNO 已经封装了跨平台的设备类型识别能力，你可以直接调用Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily属性获取当前设备类型，WASM 平台下该属性会自动解析浏览器UA返回对应值：

• 桌面端（Windows PC/Mac）返回值为 Windows.Desktop
• 手机端返回值为 Windows.Mobile
• 平板端返回值为 Windows.Tablet

示例代码：

using Windows.System.Profile;

var deviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
if (deviceFamily == "Windows.Desktop")
{
    // 桌面端逻辑
}
else if (deviceFamily == "Windows.Tablet")
{
    // 平板端逻辑
}
else if (deviceFamily == "Windows.Mobile")
{
    // 手机端逻辑
}

2. 结合屏幕尺寸判断提升准确率 #

部分平板的UA可能被识别为桌面端，你可以结合窗口尺寸做二次判断，通用判定规则参考：

• 窗口宽度≥1024px：判定为桌面端
• 窗口宽度600px~1023px：判定为平板端
• 窗口宽度＜600px：判定为手机端

3. XAML 直接自适应适配方案 #

如果你的核心需求是调整XAML布局适配屏幕，优先使用UNO支持的AdaptiveTrigger自适应触发器，不需要额外写C#判断设备类型，直接在XAML中定义不同尺寸下的布局规则即可：

<Page>
    <Grid x:Name="RootPanel">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <!-- 桌面端布局 -->
                <VisualState x:Name="DesktopState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1024" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="RootPanel.Orientation" Value="Horizontal" />
                        <Setter Target="ContentContainer.Margin" Value="48" />
                    </VisualState.Setters>
                </VisualState>
                <!-- 平板端布局 -->
                <VisualState x:Name="TabletState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="RootPanel.Orientation" Value="Vertical" />
                        <Setter Target="ContentContainer.Margin" Value="24" />
                    </VisualState.Setters>
                </VisualState>
                <!-- 手机端布局 -->
                <VisualState x:Name="MobileState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="RootPanel.Orientation" Value="Vertical" />
                        <Setter Target="ContentContainer.Margin" Value="12" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <!-- 页面内容 -->
        <StackPanel x:Name="ContentContainer">
            <TextBlock Text="示例内容" />
        </StackPanel>
    </Grid>
</Page>

注意事项 #

• WASM平台的UA识别存在小概率误差，建议将设备类型API和尺寸判断结合使用，适配准确率更高
• 如果应用支持用户自由缩放窗口，优先使用自适应触发器做响应式布局，比固定判断设备类型灵活性更强

内容的提问来源于stack exchange，提问作者Robotuner