HarmonyOS 鸿蒙Next 真机媒体查询无效，在Previewer中有效。Mate 60 系统版本为5.0.0.102

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 真机媒体查询无效，在Previewer中有效。Mate 60 系统版本为5.0.0.102

import mediaquery from '@ohos.mediaquery';

@Component
struct Index {
  @State color: string = '#DB7093';
  @State text: string = '设备竖屏';
  listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件

  // 当满足媒体查询条件时，触发回调
  onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) {
    if (mediaQueryResult.matches) { // 若设备为横屏状态，更改相应的页面布局
      this.color = '#FFD700';
      this.text = '设备横屏';
    } else {
      this.color = '#DB7093';
      this.text = '设备竖屏';
    }
  }

  aboutToAppear() {
    // 绑定回调函数
    this.listener.on('change', this.onPortrait.bind(this));
  }

  build() {
    Column() {
      Text(this.text)
        .fontSize(50)
        .fontColor(this.color)
        .margin({top:50})
    }
    .width('100%').height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 真机媒体查询无效，在Previewer中有效。Mate 60 系统版本为5.0.0.102的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
4 回复

新的官方文档示例代码：

  1. import { mediaquery, window } from ‘@kit.ArkUI’;
  2. import { common } from ‘@kit.AbilityKit’;

@Component struct MediaQueryExample { @State color: string = ‘#DB7093’; @State text: string = ‘Portrait’; // 当设备横屏时条件成立 listener:mediaquery.MediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync(’(orientation: landscape)’);

// 当满足媒体查询条件时，触发回调 onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) { if (mediaQueryResult.matches as boolean) { // 若设备为横屏状态，更改相应的页面布局 this.color = ‘#FFD700’; this.text = ‘Landscape’; } else { this.color = ‘#DB7093’; this.text = ‘Portrait’; } }

aboutToAppear() { // 绑定当前应用实例 // 绑定回调函数 this.listener.on(‘change’, (mediaQueryResult: mediaquery.MediaQueryResult) => { this.onPortrait(mediaQueryResult) });

}

aboutToDisappear() { // 解绑listener中注册的回调函数 this.listener.off(‘change’); }

// 改变设备横竖屏状态函数 private changeOrientation(isLandscape: boolean) { // 获取UIAbility实例的上下文信息 let context:common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext; // 调用该接口手动改变设备横竖屏状态 window.getLastWindow(context).then((lastWindow) => { lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT) }); }

build() { Column({ space: 50 }) { Text(this.text).fontSize(50).fontColor(this.color) Text(‘Landscape’).fontSize(50).fontColor(this.color).backgroundColor(Color.Orange) .onClick(() => { this.changeOrientation(true); }) Text(‘Portrait’).fontSize(50).fontColor(this.color).backgroundColor(Color.Orange) .onClick(() => { this.changeOrientation(false); }) } .width(‘100%’).height(‘100%’) } }

更多关于HarmonyOS 鸿蒙Next 真机媒体查询无效，在Previewer中有效。Mate 60 系统版本为5.0.0.102的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


学习了，帮到我了。

在module.json5中设置"orientation"属性值为"auto_rotation"，就可以了

“abilities”: [ { //… “orientation”: “auto_rotation” } ]

针对您提到的“HarmonyOS 鸿蒙Next 真机媒体查询无效，在Previewer中有效。Mate 60 系统版本为5.0.0.102”的问题，可能的原因及解决方案如下：

  1. 真机与Previewer环境差异：

    • 预览器（Previewer）通常模拟的是理想化的开发环境，而真机可能因系统配置、权限设置等因素导致媒体查询结果不同。

  2. 媒体查询语法或逻辑错误：

    • 检查媒体查询的语法是否正确，包括媒体类型、特性及值是否书写无误。
    • 确认媒体查询逻辑是否适用于真机的屏幕尺寸、分辨率等特性。

  3. 系统权限或应用设置：

    • 检查应用是否已获得必要的系统权限，如访问存储、摄像头等，这些权限可能影响媒体查询的执行。
    • 确认应用设置中是否有针对媒体查询的特殊配置或限制。

  4. 系统更新或兼容性问题：

    • 鸿蒙系统可能在不同版本间存在细微差异，导致某些媒体查询在特定版本上无效。
    • 检查是否有针对Mate 60系统版本5.0.0.102的特定兼容性说明或更新。

如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部