HarmonyOS 折叠屏设备适配
折叠屏设备 由于屏幕切换(页面布局无变化)导致的 控件尺寸变化,这个如何适配?
例如,非折叠屏手机/折叠屏手机折叠状态 时的一个 static的固定高度kHeight。在折叠屏手机 展开全屏时,(页面布局不变的情况下)这个高度实际上会等比放大(页面布局不变,宽度变宽,高度等比放大),如何让 页面感知到这个kHeight的变化?有参考案例吗?
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS 适配折叠屏时,如何获取当前设备类型(手机/折叠屏手机/平板等)?
818浏览 • 1回复 待解决
折叠屏适配相关资料,折叠屏适配文档在哪里?
2316浏览 • 1回复 待解决
HarmonyOS 折叠屏怎么适配,折叠屏的悬停状态,以及折叠屏适配的指导文档
534浏览 • 1回复 待解决
HarmonyOS 折叠屏适配资料
534浏览 • 1回复 待解决
HarmonyOS flutter如何适配折叠屏
39浏览 • 1回复 待解决
HarmonyOS uniapp如何适配折叠屏
31浏览 • 1回复 待解决
HarmonyOS 组件布局怎么适配折叠屏?
405浏览 • 1回复 待解决
HarmonyOS navigation支持不了折叠屏适配
28浏览 • 1回复 待解决
HarmonyOS web组件内容适配折叠屏
308浏览 • 1回复 待解决
HarmonyOS Navigation的折叠屏适配问题
51浏览 • 1回复 待解决
HarmonyOS 折叠屏H5适配问题
874浏览 • 1回复 待解决
是否有相关折叠屏适配文档?
1929浏览 • 1回复 待解决
HarmonyOS采用Flutter开发,如何适配折叠屏?
37浏览 • 1回复 待解决
HarmonyOS的折叠屏适配有什么方案吗?
498浏览 • 1回复 待解决
HarmonyOS 折叠屏页面显示内容截断,如何适配?
242浏览 • 1回复 待解决
HarmonyOS 折叠屏、平板 主页平行视界适配问题
31浏览 • 1回复 待解决
如何判断当前设备是不是折叠屏?
645浏览 • 1回复 待解决
HarmonyOS 相机全屏预览流在折叠屏上适配问题咨询
91浏览 • 1回复 待解决
HarmonyOS 如何判断当前设备是手机还是折叠屏手机
1077浏览 • 1回复 待解决
在鸿蒙FA开发中 html 如何实现多端适配 尤其是 平板 横屏 竖屏和折叠屏适配?
4870浏览 • 1回复 待解决
HarmonyOS 折叠屏适配的相关白皮书或者手册咨询
19浏览 • 1回复 待解决
HarmonyOS 如何监听折叠屏展开折叠
114浏览 • 1回复 待解决
如何区分折叠屏与非折叠屏手机?
370浏览 • 0回复 待解决
HarmonyOS 如何监听折叠屏折叠状态变化
41浏览 • 1回复 待解决
HarmonyOS 折叠屏和pad上架审核的标准,还有应用适配的标准
32浏览 • 1回复 待解决
折叠屏适配方案包括以下内容:
-手机和折叠屏折叠态,应用需要适配竖屏布局。仅部分特殊场景例如横屏游戏、长视频需要适配横屏布局。当设备尺寸比例接近1:1时,建议横竖屏使用相同或相近的布局;当设备尺寸比例差异大时,横竖屏可以使用不同的布局,从而提供更好的使用体验。
-对于挖孔区的适配,需要考虑核心内容或重要交互不要被挖孔区遮挡。如果被遮挡,则应进行局部内容等避让;可滚动内容无需专门避让挖孔区。要避免因为避让挖孔导致左右侧留白不一致。
-在多端设备上,长视频、直播、会议、通话等场景下支持画中画功能。卡片广告在宽屏设备上建议使用延伸布局和形变进行响应式适配。
-针对折叠屏悬停态(即用户可以将产品半折后立在桌面上),中间弯折区域难以操作且显示内容会变形,因此建议页面内容进行折痕区避让适配。建议上半屏内容由中线向上避让16vp(3毫米)、下半屏内容由中线向下避让40vp(7毫米)。这些是折叠屏设计的主要方案概述。
可参考:
折叠屏UX体验:https://developer.huawei.com/consumer/cn/doc/design-guides/ux-guidelines-foldable-screen-0000001807866557
判断折叠状态:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-display-V5#foldstatus10
一多开发:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/foreword-V5
折叠屏避让:https://developer.huawei.com/consumer/cn/doc/design-guides/responsive-design-overview-0000001746498066#section127711650854
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-folderstack-V5
可以通过windowSizeChange来监听高度,具体可参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#onwindowsizechange7