输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
FAQ
FAQ多设备场景一次开发多端部署常见问题手机端应用在PC端无法全屏展示

手机端应用在PC端无法全屏展示

更新时间: 2026-08-26 01:00
本文导读

问题现象

手机端应用在PC上仍显示为手机样式UI，无法打开全屏。

效果图如下：

背景知识

一多适配提供帮助开发者快速开发出适配多种类型设备的应用的能力。一多适配开发使用的布局能力包括以下两种方式：

  • 自适应布局：开发框架提供了拉伸，均分，占比，缩放，延伸，隐藏，折行等七种自适应布局能力。这些布局能力可以独立使用，也可多种布局叠加使用。
  • 响应式布局：基于响应式设计方法论进行布局的方法，核心思想是页面根据不同屏幕尺寸，进行不同的UI展示，以此自动调整布局。

问题定位

  1. 排查项目代码中所有module.json5配置文件中的deviceTypes配置项，是否包含了'2in1'选项。
  2. 排查项目代码中UI相关的代码，是否针对PC端使用自适应布局和响应式布局，做了一多适配的逻辑。

分析结论

  1. 项目代码中的module.json5配置文件中的deviceTypes配置项，未包含'2in1'。
  2. 项目代码中未使用响应式布局逻辑进行设备屏幕的尺寸的监听，导致页面UI在PC端展示变形。

修改建议

  1. 修改项目中的所有module.json5配置文件中的deviceTypes配置项，新增'2in1'项。如果项目中包含多个模块，每个模块的module.json5都需要修改deviceTypes配置。
  2. 监听屏幕尺寸，获取相应的断点进行保存。
    收起
    自动换行
    深色代码主题
    复制
    1. smListener: mediaquery.MediaQueryListener =
    2.   this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)');
    3. mdListener: mediaquery.MediaQueryListener =
    4.   this.getUIContext().getMediaQuery().matchMediaSync('(520vp<=width<840vp)');
    5. lgListener: mediaquery.MediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync('(840vp<=width)');
    6. 

    7. // 注册媒体属性变更回调事件，监听屏幕尺寸在页面初始化的时候完成注册。
    8. public register() {
    9.   this.smListener = this.getUIContext().getMediaQuery().matchMediaSync('(320vp<=width<520vp)');
    10.   this.smListener.on('change', this.isBreakpointSM);
    11.   this.mdListener = this.getUIContext().getMediaQuery().matchMediaSync('(520vp<=width<840vp)');
    12.   this.mdListener.on('change', this.isBreakpointMD);
    13.   this.lgListener = this.getUIContext().getMediaQuery().matchMediaSync('(840vp<=width)');
    14.   this.lgListener.on('change', this.isBreakpointLG);
    15. }
    16. 

    17. // 保存屏幕尺寸的断点
    18. private updateCurrentBreakpoint(breakpoint: string) {
    19.   if (this.currentBreakpoint !== breakpoint) {
    20.     this.currentBreakpoint = breakpoint;
    21.     AppStorage.set<string>('currentBreakpoint', this.currentBreakpoint);
    22.   }
    23. }
    24. 

    25. private isBreakpointSM = (mediaQueryResult: mediaquery.MediaQueryResult) => {
    26.   if (mediaQueryResult.matches) {
    27.     this.updateCurrentBreakpoint('sm');
    28.   }
    29. };
    30. 

    31. private isBreakpointMD = (mediaQueryResult: mediaquery.MediaQueryResult) => {
    32.   if (mediaQueryResult.matches) {
    33.     this.updateCurrentBreakpoint('md');
    34.   }
    35. };
    36. 

    37. private isBreakpointLG = (mediaQueryResult: mediaquery.MediaQueryResult) => {
    38.   if (mediaQueryResult.matches) {
    39.     this.updateCurrentBreakpoint('lg');
    40.   }
    41. };
    42.
  3. 通过判断断点，刷新UI页面。以下代码片段以tab元素为例。
    收起
    自动换行
    深色代码主题
    复制
    1. @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm'; // 初始化默认为手机
    2. 

    3. build() {
    4.   Column() {
    5.     Tabs({
    6.       barPosition: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarPosition.Start : BarPosition.End,
    7.     }) {
    8.       // tab内容
    9. 

    10.     }
    11.     .barWidth(this.currentBreakpoint === 'lg' ?
    12.       $r('app.float.barWidth') : StyleConstants.FULL_WIDTH)
    13.     .barHeight(this.currentBreakpoint === 'lg' ?
    14.       StyleConstants.SIXTY_HEIGHT : $r('app.float.back_width'))
    15.     .vertical(this.currentBreakpoint === 'lg')
    16.   }
    17. }
    18.
  1. 对页面其他元素或组件，采用相应的自适应布局或响应式布局进行相应的改造。

    效果如下：

    PC上进行全屏展示：

应用未适配自由多窗，在平板设备上出现截断、挤压、堆叠等现象
弹窗页面文本重叠
相关推荐
文档PC打开应用布局异常
文档应用在平板或PC上的布局异常
文档应用未适配分屏模式
文档应用如何上架分发到多端（手机、PC、平板）
文档PC端启动应用默认全屏模式显示，非悬浮窗模式
文档多设备设置界面
文档一多适配
文档应用未适配自由多窗，在平板设备上出现截断、挤压、堆叠等现象
文档智慧多窗
示例代码基于一多能力实现响应式布局
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词