鸿蒙OS（HarmonyOS）的核心优势之一便是“一次开发、多端部署”，这一特性打破了传统移动应用“单端开发、多端适配”的低效模式，让开发者仅凭一套代码就能覆盖手机、平板、智慧屏、手表、车机等全场景设备。随着鸿蒙生态的持续扩张，多端适配已成为鸿蒙原生App开发的必备能力，直接决定应用的覆盖范围、用户体验与市场竞争力。

本文基于鸿蒙原生开发技术栈（ArkTS + 声明式ArkUI），从多端适配核心原理、适配原则、关键技术、组件封装、实战落地到性能优化，全方位拆解鸿蒙App多端适配的开发逻辑，结合具体案例手把手教你实现一套代码适配多设备，最终输出一个能在手机、平板、智慧屏上流畅运行的多端应用，助力开发者掌握全场景开发核心能力。

一、鸿蒙多端适配核心认知

1.1 多端适配的本质

鸿蒙多端适配并非简单的“屏幕缩放”，而是基于鸿蒙的“分布式技术架构”与“声明式UI框架”，让应用能根据不同设备的硬件特性（屏幕尺寸、分辨率、输入方式）、软件环境（系统版本、设备形态）自动调整UI布局、组件样式、交互逻辑与功能模块，实现“千人千面”的全场景体验。

其核心逻辑可概括为：一套代码基座 + 多端差异化配置 + 框架自动适配。开发者无需为每类设备单独编写代码，只需在一套主代码中处理差异化场景，鸿蒙框架会根据运行设备的属性自动加载对应配置，实现多端无缝适配。

1.2 鸿蒙多端适配的核心优势

相较于传统跨端方案（如React Native、Flutter）或原生多端开发，鸿蒙多端适配具备三大核心优势：

1. 生态原生适配：深度贴合鸿蒙分布式架构，支持设备间能力共享（如手机调用智慧屏的显示能力、手表调用手机的网络能力），适配效果优于第三方跨端框架；

2. 开发效率最大化：一套代码覆盖全场景设备，减少80%以上的重复开发工作量，后续迭代只需维护一套代码，大幅降低开发与维护成本；

3. 体验一致性与差异化平衡：既能保证不同设备上的核心体验一致（如功能逻辑、视觉风格），又能针对设备特性做差异化优化（如智慧屏适配遥控器操作、手表适配小屏交互）。

1.3 多端适配的核心适配维度

鸿蒙App多端适配需覆盖四大核心维度，缺一不可，否则会导致部分设备体验拉胯：

• UI布局适配：根据屏幕尺寸、分辨率、宽高比调整组件位置、大小、间距，避免出现布局错乱、内容溢出或留白过多；

• 组件样式适配：针对不同设备调整字体大小、颜色、圆角、阴影等样式，保证视觉协调性（如手表小屏用小字体，智慧屏大屏用粗体）；

• 交互逻辑适配：适配不同设备的输入方式（手机触屏、平板手写、智慧屏遥控器、手表按键），调整交互反馈（如遥控器焦点跳转、触屏点击效果）；

• 功能模块适配：根据设备硬件能力（如相机、麦克风、存储、网络）与系统权限，动态显示/隐藏功能模块（如手表无相机则隐藏拍照功能）。

二、多端适配开发前核心准备

2.1 明确适配设备范围与特性

开发前需先确定应用要覆盖的设备类型，不同设备的硬件与系统特性差异较大，直接决定适配策略。鸿蒙生态主流设备特性如下表所示：

设备类型	屏幕特性	输入方式	核心限制	适配重点
手机	尺寸5-7英寸，分辨率1080P+，宽高比16:9/18:9	触屏、手势（滑动、缩放）	无明显限制，性能充足	基础布局适配，手势交互优化
平板	尺寸7-12英寸，分辨率2K+，宽高比4:3/16:10	触屏、手写笔、键盘	屏幕空间充足，支持分屏	双栏布局、手写笔适配、分屏适配
智慧屏	尺寸32-75英寸+，分辨率4K，宽高比16:9	遥控器（方向键、确认键）、语音	交互距离远，操作精度低	大字体、大按钮、焦点导航、语音交互
智能手表	尺寸1.2-1.5英寸，分辨率300x300左右，圆形/方形	触屏、实体按键	屏幕小、性能有限、续航敏感	极简布局、小字体、核心功能保留

本文以手机、平板、智慧屏三类主流设备为适配目标，覆盖绝大多数鸿蒙用户场景，手表因特性差异较大，后续可单独拓展。

2.2 开发环境配置（多端适配专属）

基于之前基础开发环境（DevEco Studio 4.0+、鸿蒙SDK），需补充以下多端适配相关配置：

2.2.1 配置多设备SDK

打开DevEco Studio，进入“Configure→Project Structure→SDK Location”，除了已配置的HarmonyOS NEXT SDK，需额外勾选对应设备的SDK包：

• 平板/手机：默认包含在HarmonyOS NEXT SDK中，无需额外下载；

• 智慧屏：勾选“HarmonyOS TV SDK”（需与主SDK版本一致）；

• 手表：勾选“HarmonyOS Wearable SDK”（如需适配）。

点击“Apply”自动下载，确保所有适配设备的SDK都已安装完成。

2.2.2 配置多设备模拟器

多端适配需在对应设备模拟器上测试，避免真机测试的繁琐，配置步骤如下：

1. 打开“AVD Manager”，点击“Create Virtual Device”；

2. 分别选择设备类型：

   1. 手机：选择“Phone→HarmonyOS NEXT Phone”；

   2. 平板：选择“Tablet→HarmonyOS NEXT Tablet”；

   3. 智慧屏：选择“TV→HarmonyOS NEXT TV”。

3. 选择对应设备的系统镜像（与SDK版本一致），设置模拟器名称（如“Phone-Test”“TV-Test”），点击“Finish”创建；

4. 启动对应模拟器，确保能正常加载，后续开发中可切换不同模拟器测试适配效果。

2.2.3 配置设备形态清单

在应用核心配置文件“module.json5”中，声明应用支持的设备形态，让鸿蒙框架识别应用可运行的设备类型，配置如下：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "package": "com.example.harmonymulti",
    "versionCode": 1000000,
    "versionName": "1.0.0",
    "deviceTypes": [ // 声明支持的设备形态
      "phone",       // 手机
      "tablet",      // 平板
      "tv"           // 智慧屏
    ],
    // 其他配置（权限、Ability等）...
  }
}

若未声明设备形态，应用可能无法在部分设备上安装或运行，需根据实际适配范围配置。

三、鸿蒙多端适配核心技术与实操

3.1 布局适配：弹性布局与自适应尺寸

布局适配是多端适配的基础，核心目标是让UI布局能根据屏幕尺寸自动调整，避免固定尺寸导致的适配问题。鸿蒙声明式ArkUI提供了多种适配布局，其中Flex弹性布局、Grid网格布局是多端适配的首选，配合自适应尺寸单位，可实现全场景布局兼容。

3.1.1 自适应尺寸单位（替代固定像素）

传统开发中常用固定像素（px）定义尺寸，但不同设备分辨率差异大，px单位会导致布局错乱。鸿蒙提供了两种自适应尺寸单位，优先使用：

1. vp（虚拟像素）：鸿蒙推荐的核心适配单位，会根据设备屏幕密度自动缩放，保证不同分辨率设备上的显示效果一致。1vp在普通屏幕上约等于1px，在高清屏幕上会自动放大，无需开发者手动计算；

2. 百分比单位：用“%”表示，基于父组件的尺寸计算，适合需要占满父组件比例的场景（如宽度100%、高度50%）。

注意：多端适配中禁止使用px单位，所有组件尺寸、间距、字体大小均使用vp或百分比单位。

3.1.2 Flex弹性布局实战（基础适配）

Flex布局支持子组件弹性排列，可通过“justifyContent”“alignItems”“flexWrap”等属性控制布局方向、对齐方式与换行，适配不同屏幕宽度。以下是一个商品列表项的Flex布局适配案例，可在手机、平板、智慧屏上自动调整：

// 商品列表项组件（Flex自适应布局）
import { Flex, Image, Text, Badge } from '@ohos/ui.components';
import { FlexAlign, FlexDirection, BadgePosition } from '@ohos/ui.components.common';
import { FontWeight } from '@ohos/ui.text';

@Component
export struct GoodsItem {
  private goods: {
    name: string;
    price: number;
    imgUrl: string;
    isHot: boolean;
  };

  build() {
    // Flex布局：横向排列，超出换行，垂直居中对齐
    Flex({
      direction: FlexDirection.Row,
      align: FlexAlign.Center,
      justifyContent: FlexAlign.SpaceBetween,
      flexWrap: FlexWrap.Wrap
    })
      .width('100%') // 占满父组件宽度（百分比单位）
      .padding(16) // 自适应间距（vp单位）
      .backgroundColor('#FFFFFF')
      .borderRadius(12) { // 圆角（vp单位）
      // 商品图片：固定宽高比，适应不同屏幕
      Image(this.goods.imgUrl)
        .width(80) // 自适应宽度（vp）
        .height(80) // 自适应高度（vp）
        .objectFit(ImageFit.Cover)
        .borderRadius(8);

      // 商品信息：弹性占比，自动填充剩余空间
      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center })
        .flexGrow(1) // 弹性占比，优先填充剩余空间
        .margin({ left: 12 }) // 自适应间距（vp）
        .maxWidth('60%') { // 最大宽度限制，避免文字溢出
        Text(this.goods.name)
          .fontSize(18) // 自适应字体（vp）
          .fontWeight(FontWeight.Medium)
          .maxLines(2) // 最多两行，超出省略
          .textOverflow({ overflow: TextOverflow.Ellipsis });

        Text(`¥${this.goods.price}`)
          .fontSize(16)
          .fontColor('#FF3B30')
          .margin({ top: 4 });
      }

      // 热销标签：仅在有热度标识时显示
      if (this.goods.isHot) {
        Badge({
          count: '',
          position: BadgePosition.RIGHT_TOP,
          style: { badgeColor: '#FF9500', textColor: '#FFFFFF', fontSize: 12 }
        }) {
          Text('热销')
            .fontSize(12)
            .padding({ left: 4, right: 4, top: 2, bottom: 2 });
        }
      }
    }
  }
}

**适配效果**：在手机上，商品信息与标签横向排列，文字自动换行；在平板/智慧屏上，由于屏幕宽度充足，组件横向排列更宽松，无需换行，实现自适应布局。

3.1.3 网格布局与分屏适配（平板/智慧屏专属）

平板与智慧屏屏幕空间充足，单一列表布局会造成空间浪费，可通过Grid网格布局实现多列展示，同时适配平板分屏场景。以下是商品列表的Grid布局适配案例，根据屏幕宽度自动调整列数：

// 商品列表组件（Grid多列适配）
import { Grid, GridItem, Text } from '@ohos/ui.components';
import { Column } from '@ohos/ui.components';
import { FlexAlign } from '@ohos/ui.components.common';
import { GoodsItem } from './GoodsItem';
import { MediaQuery, MediaQueryObserver } from '@ohos.ui.mediaquery';

@Entry
@Component
struct GoodsList {
  // 模拟商品数据
  private goodsList: Array<{ name: string; price: number; imgUrl: string; isHot: boolean }> = [
    { name: '鸿蒙原生开发实战教程', price: 99, imgUrl: '$media:goods1', isHot: true },
    { name: 'ArkTS语法详解', price: 79, imgUrl: '$media:goods2', isHot: false },
    { name: 'ArkUI声明式开发', price: 89, imgUrl: '$media:goods3', isHot: true },
    { name: '鸿蒙多端适配指南', price: 109, imgUrl: '$media:goods4', isHot: false },
    { name: '鸿蒙分布式能力开发', price: 119, imgUrl: '$media:goods5', isHot: true },
    { name: '鸿蒙应用性能优化', price: 99, imgUrl: '$media:goods6', isHot: false }
  ];

  // 媒体查询：监听屏幕宽度，动态调整列数
  private mediaQueryObserver: MediaQueryObserver = MediaQuery.createObserver();
  @State columnCount: number = 2; // 默认列数

  // 页面初始化时监听屏幕尺寸变化
  aboutToAppear() {
    // 定义媒体查询条件：屏幕宽度≥800vp（平板/智慧屏），≥1200vp（大屏智慧屏）
    const mediaQuery1 = this.mediaQueryObserver.matchMediaSync('(min-width: 800vp)');
    const mediaQuery2 = this.mediaQueryObserver.matchMediaSync('(min-width: 1200vp)');

    // 根据屏幕宽度设置列数
    this.updateColumnCount(mediaQuery1.matches, mediaQuery2.matches);

    // 监听屏幕尺寸变化（如平板分屏、智慧屏分辨率调整）
    mediaQuery1.onChange((matches) => {
      this.updateColumnCount(matches, mediaQuery2.matches);
    });
    mediaQuery2.onChange((matches) => {
      this.updateColumnCount(mediaQuery1.matches, matches);
    });
  }

  // 更新列数的方法
  private updateColumnCount(isTablet: boolean, isBigScreen: boolean) {
    if (isBigScreen) {
      this.columnCount = 4; // 大屏智慧屏：4列
    } else if (isTablet) {
      this.columnCount = 3; // 平板/小屏智慧屏：3列
    } else {
      this.columnCount = 2; // 手机：2列
    }
  }

  build() {
    Column({ align: FlexAlign.Center })
      .width('100%')
      .height('100%')
      .padding(16)
      .backgroundColor('#F5F5F5') {
      Text('商品列表（多端适配）')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 16 });

      // Grid网格布局：根据columnCount动态调整列数
      Grid()
        .width('100%')
        .height('100%')
        .columnsTemplate(`repeat(${this.columnCount}, 1fr)`) // 平均分配列宽
        .columnsGap(16) // 列间距（vp）
        .rowsGap(16) // 行间距（vp） {
        ForEach(
          this.goodsList,
          (item) => {
            GridItem() {
              GoodsItem({ goods: item });
            }
          },
          (item) => item.name // 唯一标识
        );
      }
    }
  }
}

• 手机（屏幕宽度<800vp）：2列展示，充分利用屏幕宽度，避免文字溢出；

• 平板/小屏智慧屏（800vp≤宽度<1200vp）：3列展示，合理利用屏幕空间，提升信息密度；

• 大屏智慧屏（宽度≥1200vp）：4列展示，最大化利用屏幕空间，适配远距离观看；

• 平板分屏时，屏幕宽度缩小，媒体查询会自动触发列数调整（从3列变为2列），保证布局正常。

3.2 样式适配：媒体查询与差异化样式

除了布局适配，不同设备的样式（字体、颜色、圆角、阴影）也需差异化调整，核心依赖鸿蒙的媒体查询（MediaQuery）能力，通过监听屏幕尺寸、方向、分辨率等属性，动态切换样式配置。

3.2.1 媒体查询核心用法

媒体查询通过`MediaQueryObserver`监听设备属性变化，支持的核心查询条件如下：

• 屏幕尺寸：`min-width`/`max-width`（最小/最大宽度）、`min-height`/`max-height`（最小/最大高度）；

• 屏幕方向：`orientation: portrait`（竖屏）、`orientation: landscape`（横屏）；

• 分辨率：`min-device-pixel-ratio`（最小设备像素比）；

• 设备类型：`device-type: phone`/`tablet`/`tv`（部分设备支持）。

媒体查询可用于动态调整字体大小、颜色、组件隐藏/显示、布局方向等，是多端样式适配的核心工具。

3.2.2 差异化样式适配实战

以下案例通过媒体查询实现不同设备的样式差异化：手机端用常规字体与颜色，平板端放大字体，智慧屏端用粗体、大圆角与深色阴影，提升远距离观看体验：

// 平板手写笔批注组件
import { Canvas, Column, Button } from '@ohos/ui.components';
import { FlexAlign, ButtonType } from '@ohos/ui.components.common';
import { StylusEvent, CanvasContext } from '@ohos/ui.canvas';

@Entry
@Component
struct StylusAdaptation {
  private canvasContext: CanvasContext | null = null;
  @State isDrawing: boolean = false;
  @State lineWidth: number = 5; // 线条宽度
  @State lineColor: string = '#FF3B30'; // 线条颜色

  // 初始化Canvas上下文
  private initCanvas(context: CanvasContext) {
    this.canvasContext = context;
    this.canvasContext.lineCap = 'round'; // 线条端点圆润
    this.canvasContext.lineJoin = 'round'; // 线条交点圆润
  }

  // 手写笔按下事件
  private onStylusDown(event: StylusEvent) {
    this.isDrawing = true;
    const { x, y, pressure } = event; // pressure：压感（0-1）
    // 根据压感调整线条宽度
    this.canvasContext?.beginPath();
    this.canvasContext?.moveTo(x, y);
    this.canvasContext?.lineWidth = this.lineWidth * pressure;
  }

  // 手写笔移动事件
  private onStylusMove(event: StylusEvent) {
    if (!this.isDrawing || !this.canvasContext) return;
    const { x, y, pressure } = event;
    this.canvasContext.lineWidth = this.lineWidth * pressure;
    this.canvasContext.lineTo(x, y);
    this.canvasContext.strokeStyle = this.lineColor;
    this.canvasContext.stroke();
  }

  // 手写笔抬起事件
  private onStylusUp() {
    this.isDrawing = false;
  }

  build() {
    Column({ align: FlexAlign.Center })
      .width('100%')
      .height('100%')
      .padding(20) {
      Text('平板手写笔批注（压感适配）')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 });

      // 操作按钮
      Flex({ justifyContent: FlexAlign.SpaceAround })
        .width('80%')
        .margin({ bottom: 20 }) {
        Button('清空', { type: ButtonType.Capsule })
          .width(150)
          .height(50)
          .fontSize(18)
          .backgroundColor('#FF3B30')
          .fontColor('#FFFFFF')
          .onClick(() => {
            this.canvasContext?.clearRect(0, 0, 800, 600);
          });

        Button('切换颜色', { type: ButtonType.Capsule })
          .width(150)
          .height(50)
          .fontSize(18)
          .backgroundColor('#007AFF')
          .fontColor('#FFFFFF')
          .onClick(() => {
            this.lineColor = this.lineColor === '#FF3B30' ? '#34C759' : '#FF3B30';
          });
      }

      // 手写画布
      Canvas(this.initCanvas.bind(this))
        .width('100%')
        .height(600)
        .backgroundColor('#FFFFFF')
        .borderRadius(12)
        .onStylusDown(this.onStylusDown.bind(this))
        .onStylusMove(this.onStylusMove.bind(this))
        .onStylusUp(this.onStylusUp.bind(this))
        .onTouchDown((event) => {
          // 兼容触屏操作
          this.isDrawing = true;
          const { x, y } = event.touches[0];
          this.canvasContext?.beginPath();
          this.canvasContext?.moveTo(x, y);
          this.canvasContext?.lineWidth = this.lineWidth;
        })
        .onTouchMove((event) => {
          if (!this.isDrawing || !this.canvasContext) return;
          const { x, y } = event.touches[0];
          this.canvasContext.lineTo(x, y);
          this.canvasContext.strokeStyle = this.lineColor;
          this.canvasContext.stroke();
        })
        .onTouchUp(() => {
          this.isDrawing = false;
        });
    }
  }
}

3.3 交互适配：多输入方式兼容

不同设备的输入方式差异较大，若仅适配触屏交互，在智慧屏（遥控器）、平板（手写笔）上会导致用户无法操作，需针对性适配多输入方式，保证交互一致性与可用性。

3.3.1 遥控器交互适配（智慧屏专属）

智慧屏主要依赖遥控器操作，核心适配点包括：焦点导航、焦点样式、方向键控制，鸿蒙ArkUI提供了完善的焦点管理能力，无需手动处理焦点跳转逻辑，只需配置焦点样式即可。

// 智慧屏遥控器交互适配组件
import { Flex, Button, Text } from '@ohos/ui.components';
import { FlexAlign, ButtonType, FocusType } from '@ohos/ui.components.common';
import { FontWeight } from '@ohos/ui.text';

@Component
struct TvRemoteAdaptation {
  @State currentTab: string = 'home';

  build() {
    Column({ align: FlexAlign.Center, justifyContent: FlexAlign.Start })
      .width('100%')
      .height('100%')
      .backgroundColor('#000000')
      .padding(30) {
      // 顶部标题（智慧屏大字体）
      Text('智慧屏应用（遥控器适配）')
        .fontSize(36)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 50 });

      // 导航栏（支持遥控器焦点跳转）
      Flex({ justifyContent: FlexAlign.SpaceAround })
        .width('100%')
        .margin({ bottom: 50 }) {
        this.TabButton('首页', 'home');
        this.TabButton('分类', 'category');
        this.TabButton('我的', 'mine');
        this.TabButton('设置', 'setting');
      }

      // 内容区
      Text(`当前选中：${this.currentTab}`)
        .fontSize(30)
        .fontColor('#FFFFFF');
    }
  }

  // 自定义Tab按钮（适配遥控器焦点）
  @Builder TabButton(text: string, key: string) {
    Button(text, { type: ButtonType.Capsule })
      .width(200)
      .height(60)
      .fontSize(24)
      .fontColor(this.currentTab === key ? '#FFFFFF' : '#999999')
      .backgroundColor(this.currentTab === key ? '#007AFF' : '#333333')
      // 焦点样式配置（遥控器选中时的样式）
      .focusable(true) // 允许获取焦点
      .focusStyle({
        borderColor: '#FFFFFF', // 焦点边框颜色
        borderWidth: 2, // 焦点边框宽度
        borderRadius: 30, // 焦点边框圆角
        shadow: '0 0 20vp rgba(0, 122, 255, 0.8)' // 焦点阴影
      })
      // 焦点获取时触发（遥控器选中）
      .onFocus(() => {
        this.currentTab = key;
      })
      // 点击事件（兼容触屏与遥控器确认键）
      .onClick(() => {
        this.currentTab = key;
      });
  }
}

**适配效果**：用遥控器方向键可切换Tab按钮焦点，焦点选中时显示白色边框与蓝色阴影，按下确认键可切换当前选中状态，同时兼容触屏点击，实现多输入方式兼容。

3.3.2 手写笔交互适配（平板专属）

平板支持手写笔输入，可适配手写批注、绘画等场景，鸿蒙提供了`StylusEvent`事件监听手写笔的压感、倾角、坐标等信息，实现精准交互适配。以下是手写笔批注案例：

// 平板手写笔批注组件
import { Canvas, Column, Button } from '@ohos/ui.components';
import { FlexAlign, ButtonType } from '@ohos/ui.components.common';
import { StylusEvent, CanvasContext } from '@ohos/ui.canvas';

@Entry
@Component
struct StylusAdaptation {
  private canvasContext: CanvasContext | null = null;
  @State isDrawing: boolean = false;
  @State lineWidth: number = 5; // 线条宽度
  @State lineColor: string = '#FF3B30'; // 线条颜色

  // 初始化Canvas上下文
  private initCanvas(context: CanvasContext) {
    this.canvasContext = context;
    this.canvasContext.lineCap = 'round'; // 线条端点圆润
    this.canvasContext.lineJoin = 'round'; // 线条交点圆润
  }

  // 手写笔按下事件
  private onStylusDown(event: StylusEvent) {
    this.isDrawing = true;
    const { x, y, pressure } = event; // pressure：压感（0-1）
    // 根据压感调整线条宽度
    this.canvasContext?.beginPath();
    this.canvasContext?.moveTo(x, y);
    this.canvasContext?.lineWidth = this.lineWidth * pressure;
  }

  // 手写笔移动事件
  private onStylusMove(event: StylusEvent) {
    if (!this.isDrawing || !this.canvasContext) return;
    const { x, y, pressure } = event;
    this.canvasContext.lineWidth = this.lineWidth * pressure;
    this.canvasContext.lineTo(x, y);
    this.canvasContext.strokeStyle = this.lineColor;
    this.canvasContext.stroke();
  }

  // 手写笔抬起事件
  private onStylusUp() {
    this.isDrawing = false;
  }

  build() {
    Column({ align: FlexAlign.Center })
      .width('100%')
      .height('100%')
      .padding(20) {
      Text('平板手写笔批注（压感适配）')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 });

      // 操作按钮
      Flex({ justifyContent: FlexAlign.SpaceAround })
        .width('80%')
        .margin({ bottom: 20 }) {
        Button('清空', { type: ButtonType.Capsule })
          .width(150)
          .height(50)
          .fontSize(18)
          .backgroundColor('#FF3B30')
          .fontColor('#FFFFFF')
          .onClick(() => {
            this.canvasContext?.clearRect(0, 0, 800, 600);
          });

        Button('切换颜色', { type: ButtonType.Capsule })
          .width(150)
          .height(50)
          .fontSize(18)
          .backgroundColor('#007AFF')
          .fontColor('#FFFFFF')
          .onClick(() => {
            this.lineColor = this.lineColor === '#FF3B30' ? '#34C759' : '#FF3B30';
          });
      }

      // 手写画布
      Canvas(this.initCanvas.bind(this))
        .width('100%')
        .height(600)
        .backgroundColor('#FFFFFF')
        .borderRadius(12)
        .onStylusDown(this.onStylusDown.bind(this))
        .onStylusMove(this.onStylusMove.bind(this))
        .onStylusUp(this.onStylusUp.bind(this))
        .onTouchDown((event) => {
          // 兼容触屏操作
          this.isDrawing = true;
          const { x, y } = event.touches[0];
          this.canvasContext?.beginPath();
          this.canvasContext?.moveTo(x, y);
          this.canvasContext?.lineWidth = this.lineWidth;
        })
        .onTouchMove((event) => {
          if (!this.isDrawing || !this.canvasContext) return;
          const { x, y } = event.touches[0];
          this.canvasContext.lineTo(x, y);
          this.canvasContext.strokeStyle = this.lineColor;
          this.canvasContext.stroke();
        })
        .onTouchUp(() => {
          this.isDrawing = false;
        });
    }
  }
}

**适配效果**：手写笔在平板上书写时，线条宽度会根据压感自动调整（压感越大线条越粗），同时兼容触屏操作，满足平板用户的手写批注需求。

3.4 功能适配：设备能力动态适配

不同设备的硬件能力与系统权限差异较大，如智慧屏无相机、手表无存储，需动态检测设备能力，显示/隐藏对应功能模块，避免功能不可用或应用闪退。鸿蒙提供了`deviceInfo`与`abilityAccessCtrl`API，用于检测设备类型与权限状态。

3.4.1 设备类型检测与功能适配

通过`deviceInfo`API获取当前设备类型，动态调整功能模块，以下案例实现：手机/平板显示拍照功能，智慧屏隐藏拍照功能并提示设备不支持：

// 设备能力动态适配组件
import { Column, Text, Button, Image, Callout } from '@ohos/ui.components';
import { FlexAlign, ButtonType } from '@ohos/ui.components.common';
import { FontWeight } from '@ohos/ui.text';
import { deviceInfo } from '@ohos.device.info';
import { camera } from '@ohos.multimedia.camera';

@Entry
@Component
struct DeviceAbilityAdaptation {
  @State deviceType: string = ''; // 设备类型
  @State isSupportCamera: boolean = false; // 是否支持相机
  @State imgUrl: string = ''; // 拍照图片路径

  aboutToAppear() {
    // 获取设备类型
    this.getDeviceType();
    // 检测是否支持相机
    this.checkCameraSupport();
  }

  // 获取设备类型
  private async getDeviceType() {
    try {
      const type = await deviceInfo.getDeviceType();
      this.deviceType = type; // 返回值：phone/tablet/tv/wearable等
    } catch (err) {
      console.error('获取设备类型失败：', err);
      this.deviceType = 'unknown';
    }
  }

  // 检测是否支持相机
  private checkCameraSupport() {
    try {
      const cameraManager = camera.getCameraManager();
      const cameraList = cameraManager.getCameraIds();
      this.isSupportCamera = cameraList.length > 0;
    } catch (err) {
      console.error('检测相机失败：', err);
      this.isSupportCamera = false;
    }
  }

  // 模拟拍照（实际开发需调用相机API）
  private takePhoto() {
    this.imgUrl = '$media:photo'; // 模拟拍照结果
  }

  build() {
    Column({ align: FlexAlign.Center, justifyContent: FlexAlign.Start })
      .width('100%')
      .height('100%')
      .padding(20)
      .backgroundColor('#F5F5F5') {
      Text(`当前设备：${this.deviceType}`)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 30 });

      // 相机功能：仅支持相机的设备显示
      if (this.isSupportCamera) {
        Button('拍照', { type: ButtonType.Capsule })
          .width(200)
          .height(50)
          .fontSize(18)
          .backgroundColor('#007AFF')
          .fontColor('#FFFFFF')
          .margin({ bottom: 20 })
          .onClick(this.takePhoto.bind(this));

        // 显示拍照结果
        if (this.imgUrl) {
          Image(this.imgUrl)
            .width(300)
            .height(300)
            .objectFit(ImageFit.Cover)
            .borderRadius(12)
            .margin({ bottom: 20 });
        }
      } else {
        // 不支持相机的设备：显示提示
        Callout({ emoji: '⚠️' })
          .width('80%')
          .backgroundColor('#FFF3CD')
          .borderColor('#FFEeba')
          .margin({ bottom: 20 }) {
          Text('当前设备不支持相机功能，无法拍照')
            .fontSize(18)
            .fontColor('#856404');
        }
      }

      // 通用功能：所有设备都显示
      Button('查看我的相册', { type: ButtonType.Capsule })
        .width(200)
        .height(50)
        .fontSize(18)
        .backgroundColor('#34C759')
        .fontColor('#FFFFFF');
    }
  }
}

四、多端适配实战：整合开发多端应用

结合以上多端适配技术，整合开发一个“鸿蒙全场景商品展示App”，一套代码覆盖手机、平板、智慧屏，实现布局、样式、交互、功能的全维度适配，完整代码如下：

// 鸿蒙全场景商品展示App（多端适配整合）
import { Column, Grid, GridItem, Flex, Image, Text, Button, Callout } from '@ohos/ui.components';
import { FlexAlign, FlexDirection, ButtonType, FocusType, ImageFit } from '@ohos/ui.components.common';
import { FontWeight, TextOverflow } from '@ohos/ui.text';
import { MediaQuery, MediaQueryObserver } from '@ohos/ui.mediaquery';
import { deviceInfo } from '@ohos.device.info';

// 商品列表项组件（Flex自适应布局）
@Component
export struct GoodsItem {
  private goods: { name: string; price: number; imgUrl: string; isHot: boolean };
  private fontSize: number;
  private isTv: boolean;

  build() {
    Flex({
      direction: FlexDirection.Row,
      align: FlexAlign.Center,
      justifyContent: FlexAlign.SpaceBetween,
      flexWrap: FlexWrap.Wrap
    })
      .width('100%')
      .padding(16)
      .backgroundColor('#FFFFFF')
      .borderRadius(this.isTv ? 16 : 12)
      .focusable(this.isTv) // 智慧屏支持焦点
      .focusStyle(this.isTv ? {
        borderColor: '#007AFF',
        borderWidth: 2,
        borderRadius: this.isTv ? 18 : 14,
        shadow: '0 0 20vp rgba(0, 122, 255, 0.8)'
      } : {}) {
      Image(this.goods.imgUrl)
        .width(this.isTv ? 100 : 80)
        .height(this.isTv ? 100 : 80)
        .objectFit(ImageFit.Cover)
        .borderRadius(8);

      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center })
        .flexGrow(1)
        .margin({ left: 12 })
        .maxWidth(this.isTv ? '50%' : '60%') {
        Text(this.goods.name)
          .fontSize(this.fontSize)
          .fontWeight(this.isTv ? FontWeight.Bold : FontWeight.Medium)
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis });

        Text(`¥${this.goods.price}`)
          .fontSize(this.fontSize - 2)
          .fontColor('#FF3B30')
          .margin({ top: 4 });
      }

      if (this.goods.isHot) {
        Text('热销')
          .fontSize(this.fontSize - 4)
          .padding({ left: 6, right: 6, top: 2, bottom: 2 })
          .backgroundColor('#FF9500')
          .fontColor('#FFFFFF')
          .borderRadius(4);
      }
    }
  }
}

// 主页面（多端适配核心）
@Entry
@Component
struct MultiDeviceApp {
  // 商品数据
  private goodsList: Array<{ name: string; price: number; imgUrl: string; isHot: boolean }> = [
    { name: '鸿蒙原生开发实战教程', price: 99, imgUrl: '$media:goods1', isHot: true },
    { name: 'ArkTS语法详解', price: 79, imgUrl: '$media:goods2', isHot: false },
    { name: 'ArkUI声明式开发', price: 89, imgUrl: '$media:goods3', isHot: true },
    { name: '鸿蒙多端适配指南', price: 109, imgUrl: '$media:goods4', isHot: false },
    { name: '鸿蒙分布式能力开发', price: 119, imgUrl: '$media:goods5', isHot: true },
    { name: '鸿蒙应用性能优化', price: 99, imgUrl: '$media:goods6', isHot: false },
    { name: '鸿蒙状态管理实战', price: 89, imgUrl: '$media:goods7', isHot: true },
    { name: '鸿蒙应用发布指南', price: 79, imgUrl: '$media:goods8', isHot: false }
  ];

  // 适配状态变量
  private mediaQueryObserver: MediaQueryObserver = MediaQuery.createObserver();
  @State columnCount: number = 2;
  @State fontSize: number = 18;
  @State isTv: boolean = false;
  @State deviceType: string = '';

  aboutToAppear() {
    // 初始化设备信息与适配配置
    this.getDeviceType();
    this.initMediaQuery();
  }

  // 获取设备类型
  private async getDeviceType() {
    try {
      const type = await deviceInfo.getDeviceType();
      this.deviceType = type;
      this.isTv = type === 'tv';
    } catch (err) {
      console.error('获取设备类型失败：', err);
      this.deviceType = 'unknown';
    }
  }

  // 初始化媒体查询
  private initMediaQuery() {
    const phoneQuery = this.mediaQueryObserver.matchMediaSync('(max-width: 799vp)');
    const tabletQuery = this.mediaQueryObserver.matchMediaSync('(min-width: 800vp) and (max-width: 1199vp)');
    const tvQuery = this.mediaQueryObserver.matchMediaSync('(min-width: 1200vp)');

    this.updateAdaptConfig(phoneQuery.matches, tabletQuery.matches, tvQuery.matches);

    phoneQuery.onChange((matches) => {
      this.updateAdaptConfig(matches, tabletQuery.matches, tvQuery.matches);
    });
    tabletQuery.onChange((matches) => {
      this.updateAdaptConfig(phoneQuery.matches, matches, tvQuery.matches);
    });
    tvQuery.onChange((matches) => {
      this.updateAdaptConfig(phoneQuery.matches, tabletQuery.matches, matches);
    });
  }

  // 更新适配配置
  private updateAdaptConfig(isPhone: boolean, isTablet: boolean, isTv: boolean) {
    if (isTv) {
      this.columnCount = 4;
      this.fontSize = 22;
      this.isTv = true;
    } else if (isTablet) {
      this.columnCount = 3;
      this.fontSize = 20;
      this.isTv = false;
    } else {
      this.columnCount = 2;
      this.fontSize = 18;
      this.isTv = false;
    }
  }

  build() {
    Column({ align: FlexAlign.Center, justifyContent: FlexAlign.Start })
      .width('100%')
      .height('100%')
      .padding(this.isTv ? 30 : 16)
      .backgroundColor(this.isTv ? '#000000' : '#F5F5F5') {
      // 标题栏
      Flex({ justifyContent: FlexAlign.SpaceBetween, align: FlexAlign.Center })
        .width('100%')
        .margin({ bottom: this.isTv ? 40 : 20 }) {
        Text('鸿蒙全场景商品馆')
          .fontSize(this.isTv ? 36 : 24)
          .fontWeight(FontWeight.Bold)
          .fontColor(this.isTv ? '#FFFFFF' : '#333333');

        // 仅手机/平板显示搜索按钮
        if (!this.isTv) {
          Button('搜索', { type: ButtonType.Capsule })
            .width(100)
            .height(40)
            .fontSize(16)
            .backgroundColor('#007AFF')
            .fontColor('#FFFFFF');
        }
      }

      // 设备提示（智慧屏显示）
      if (this.isTv) {
        Callout({ emoji: '📱' })
          .width('80%')
          .backgroundColor('#1E1E1E')
          .borderColor('#333333')
          .margin({ bottom: 30 }) {
          Text('使用遥控器方向键切换商品，确认键查看详情')
            .fontSize(18)
            .fontColor('#FFFFFF');
        }
      }

      // 商品列表（Grid多列适配）
      Grid()
        .width('100%')
        .height('100%')
        .columnsTemplate(`repeat(${this.columnCount}, 1fr)`)
        .columnsGap(this.isTv ? 20 : 16)
        .rowsGap(this.isTv ? 20 : 16) {
        ForEach(
          this.goodsList,
          (item) => {
            GridItem() {
              GoodsItem({ goods: item, fontSize: this.fontSize, isTv: this.isTv });
            }
          },
          (item) => item.name
        );
      }
    }
  }
}

五、多端适配性能优化与避坑指南

5.1 核心性能优化策略

多端适配应用若不做性能优化，可能出现大屏设备卡顿、小屏设备续航消耗过快等问题，需针对性优化：

1. 减少不必要的媒体查询监听：媒体查询会监听设备属性变化，过多监听会增加性能开销，建议合并查询条件，避免重复监听；

2. 组件懒加载：对于列表、网格等大量组件