HarmonyOS 鸿蒙Next 折叠屏系统更新后媒体查询不起作用

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

HarmonyOS 鸿蒙Next 折叠屏系统更新后媒体查询不起作用

折叠屏系统更新后媒体查询不起作用

2 回复
参考如下demo,测试使用最新版折叠屏手机的媒体查询是生效的
深色代码主题
复制
import { display, mediaquery, window } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';

@Entry @Component struct MediaQueryExample { @State text: string = ‘Hello World’; // 当设备宽度小于1200成立 listener:mediaquery.MediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync(’(width < 1200px)’);

// 当满足媒体查询条件时,触发回调 onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) { if (mediaQueryResult.matches as boolean) { display.getAllDisplays((err, data) => { let screenWidth: number = data[0].width let screenHeight: number = data[0].height console.log('宽度width = ’ + screenWidth) }) } }

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

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

build() { Column({ space: 50 }) { Text(this.text).fontSize(50) } .width(‘100%’).height(‘100%’) } }

更多关于HarmonyOS 鸿蒙Next 折叠屏系统更新后媒体查询不起作用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对您提到的HarmonyOS 鸿蒙Next 折叠屏系统更新后媒体查询不起作用的问题,这通常与系统的CSS媒体查询处理机制或屏幕适配策略有关。以下是一些可能的原因及简要说明:

  1. 系统API变更:系统更新可能引入了新的API或修改了原有API的行为,导致媒体查询的逻辑受到影响。

  2. 屏幕适配问题:折叠屏设备具有独特的屏幕形态和分辨率,系统更新可能调整了屏幕适配策略,导致媒体查询无法正确识别屏幕尺寸或方向。

  3. CSS代码兼容性:媒体查询的CSS代码可能因系统更新而不再兼容,需要检查并更新CSS代码以适应新系统的特性。

  4. 权限或配置问题:应用可能因权限不足或配置错误而无法正确获取屏幕信息,进而影响媒体查询的执行。

为了解决这个问题,建议您检查以下几点:

  • 确认应用的权限配置是否正确,确保能够获取必要的屏幕信息。
  • 检查并更新CSS代码,确保媒体查询的语法和逻辑符合新系统的要求。
  • 查阅鸿蒙系统的官方文档,了解系统更新对媒体查询和屏幕适配的影响。

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

回到顶部