HarmonyOS Next multi-device adaptation

HarmonyOS Next Multi-Device Adaptation and Responsive Development Ultimate Guide

I. Device Matrix Adaptation Strategy

1. Device Type Grading Specifications

{
  "targetDevices": {
    "mandatory": ["phone", "tablet"], // Mandatory device adaptation
    "optional": ["tv", "watch"], // Optional device adaptation
    "exclude": ["car"] // Excluded device type
  }
}

2. Resolution Dynamic Grading Scheme

// Responsive breakpoints based on screen logical width (vp)
const Breakpoints = {
  SMALL: 320,   // Smartwatch
  MEDIUM: 600,  // Foldable phone (unfolded)
  LARGE: 840    // Tablet device
};

@Builder function AdaptiveLayout() {
  if ($r('sw') < Breakpoints.SMALL) {
    Column() { /* Watch layout */ }
  } else if ($r('sw') >= Breakpoints.LARGE) {
    Grid() { /* Tablet layout */ }
  } else {
    Row() { /* Phone layout */ }
  }
}

3. Intelligent Input Adaptation

// Hybrid input event handling
@Component
struct InputAdaptor {
  @State touchActive: boolean = false;

  build() {
    Button('Action Button')
      .onTouch((event) => {
        this.touchActive = true;
      })
      .onKeyEvent((event) => {
        if (event.keyCode === 10009) { // Car rotary knob confirmation key
          this.handleConfirm();
        }
      })
  }
}

II. Three Core Solutions for Responsive Layout

1. Grid System

// 12-column grid layout template
@Entry
@Component
struct GridDemo {
  build() {
    GridRow({ columns: 12, gutter: 8 }) {
      GridCol({ span: { xs: 12, sm: 6, md: 4 } }) { /* Responsive column width */ }
      GridCol({ offset: 2, span: { xs: 12, sm: 4 } }) { /* Dynamic offset */ }
    }
    .breakpoints({ 
      xs: 320,  // < 600vp
      sm: 600,  // ≥600vp
      md: 840   // ≥840vp
    })
  }
}

2. Container Query Layout

// Dynamically adjust layout based on parent container size
@Component
struct ContainerQueryDemo {
  @BuilderParam adaptLayout: BuilderParam;

  build() {
    Column() {
      this.adaptLayout()
    }
    .size({ width: '100%', height: '100%' })
    .onAreaChange((oldValue, newValue) => {
      if (newValue.width < 300) {
        this.adaptLayout = this.buildCompactView;
      } else {
        this.adaptLayout = this.buildExpandedView;
      }
    })
  }
}

3. Atomic Adaptive Styles

// Create adaptive style variables
@Styles function adaptivePadding() {
  .padding({
    top: $r('sw') >= 840 ? 24 : 12,
    bottom: $r('sw') >= 840 ? 24 : 12,
    left: $r('sw') >= 600 ? 16 : 8,
    right: $r('sw') >= 600 ? 16 : 8
  })
}

// Apply styles
Text('Content Block')
  .adaptivePadding()
  .fontSize($r('sw') >= 840 ? 20 : 14)

III. Development Efficiency Improvement Solutions

1. Multi-Device Collaborative Debugging

# Start device matrix emulator
hdc emulator start --devices phone,watch,car

2. Layout Hot Reload Configuration

{
  "compilerOptions": {
    "enableHotReload": true,
    "hotReloadWhitelist": ["./src/layout/**/*"]
  }
}

3. Design Draft Intelligent Conversion

// Automatically generate responsive code (DevEco Studio 5.3+)
/*
1. Import Figma/Sketch design drafts
2. Recognize layout structure and constraint relationships
3. Output ArkUI adaptive components
*/