skills.rest
IsKenKenYa
IsKenKenYaCOMMUNITY
Explore all skills by this author →
GitHub

hmos-multidevice-screen-window-size

Implements HarmonyOS multi-device responsive layouts, breakpoints, and window size adaptation.

2|Updated Jun 21, 2026
Search Tags:#responsive layout#multi-device#arkui#foldable#breakpoint#harmonyos#window adaptation
One-click install
npx skills add https://github.com/IsKenKenYa/skills --skill hmos-multidevice-screen-window-size-iskenkenya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hmos-multidevice-screen-window-size
Source: https://github.com/IsKenKenYa/skills/tree/main/skills/harmonyos/solutions/HMOS-technologies/multi-device/hmos-multidevice-screen-window-size
Command: npx skills add https://github.com/IsKenKenYa/skills --skill hmos-multidevice-screen-window-size-iskenkenya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? HarmonyOS apps must render correctly across phones, tablets, foldables, 2in1 devices, and wearables, but developers often face layout truncation, overflow, misalignment, broken breakpoints, and split-screen issues when adapting to varying window sizes. This Skill provides a structured decision tree and specification library to diagnose and implement screen/window size adaptation correctly. ## Core Features & Use Cases - Scenario-based decision tree: Routes tasks across nine scenes (SIZE-00 to SIZE-08) covering responsive layouts, breakpoint systems, window listeners, adaptive component behaviors, anomaly fixes, in-app split-screen, EasyGo parallel-view split panes, and multi-device resource qualifiers. - Specification enforcement: Applies P0/P1 adaptation specs (SPEC-00 to SPEC-16) with mandatory verification matrices for image ratios, margins, font/icon scaling, and dialog constraints. - Bug fix playbooks: Diagnoses common defects such as GridRow not reducing columns, Image stretching from bad constraintSize/objectFit usage, windowSizeChange listener failures, and Navigation/SideBarContainer nesting conflicts. - Use Case: When a user reports that a list-detail page truncates on a foldable's unfolded screen, the Skill routes through the decision tree, loads the responsive layout and breakpoint references, and produces a GridRow/NavigationMode.Auto based fix that preserves the single-pane baseline. ## Quick Start Ask the agent to adapt your HarmonyOS page for foldables and tablets, for example: fix the truncation and make my list-detail page switch to split view on wide screens.

Frequently Asked Questions about hmos-multidevice-screen-window-size

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement responsive layouts in HarmonyOS ArkUI?▼

Use GridRow and GridCol with breakpoints for page-level structure switching, covering repeated, split, reflow, and indented layout patterns. For simple single/dual pane navigation, prefer NavigationMode.Auto, which switches between Stack and Split at the 600vp threshold automatically.

How to listen for window size changes in HarmonyOS?▼

Register window.on('windowSizeChange') inside the loadContent callback after obtaining the main window via getMainWindowSync, then sync values to AppStorage. Cancel the listener in onWindowStageDestroy, and also listen to systemDensityChange when DPI changes affect breakpoint calculations.

What is the difference between adaptive and responsive layout in ArkUI?▼

Adaptive layout handles component-level adjustments without breakpoints using layoutWeight, Blank, aspectRatio, displayPriority, and FlexWrap. Responsive layout handles page-level structure switching driven by breakpoints using containers like GridRow, SideBarContainer, and Navigation.

Why does my HarmonyOS image stretch or distort on large screens?▼

Stretching usually comes from setting width('100%') plus height('100%') with objectFit(Cover) inside a fixed-height container, or from setting only width without height constraints. Fix it by using Scroll containers or applying aspectRatio plus constraintSize at the container level instead of forcing image dimensions.

How do I enable EasyGo parallel view split panes on HarmonyOS foldables?▼

Create an easy_go.json configuration file and declare it in module.json5, keeping page code on normal Stack navigation with pushPath. The system automatically takes over split-pane display on wide screens, so do not manually add NavigationMode.Split logic alongside EasyGo.

Why is GridRow not reducing columns when my side panel narrows?▼

GridRow is likely referencing window size instead of its own component size. Set breakpoints reference to BreakpointsReference.ComponentSize so the grid responds to the local container width rather than the full window.

Related Skills

Explore More Software Engineering Skills→
shirulotshirulot

hmos-multidevice-screen-window-size

Manage HarmonyOS screen and window size adaptation with breakpoint strategies.

Community
Advanced
androidandroid
6.6k

adaptive

Migrate Jetpack Compose navigation and layouts to Navigation 3 adaptive multi-pane UIs.

Official
Advanced
blencorpblencorp
101

tailwindcss

Provide Tailwind CSS v4 utility-first guidance for responsive UI styling.

Official
Intermediate
shirulotshirulot

hmos-multidevice-fold-state

Validate and route HarmonyOS foldable-device adaptation tasks through a declarative scene and resource index.

Community
Advanced