首页 > 其他分享 >【快应用】异形屏快应用如何全屏适配

【快应用】异形屏快应用如何全屏适配

时间:2022-11-14 21:57:19浏览次数:66  
标签:屏快 异形 适配 fitCutout 全屏 应用 true

 问题背景:

快应用页面中设置fullscreen属性为true全屏模式下,在一些异形屏上无法完全适配,状态栏会被黑边替代,无法真正全屏显示。这部分机型如何才能完全适配变成全屏呢?

相关代码:

"display": {

    "pages": {

      "Hello": {

        "titleBarText": "TitleBar",

        "fullScreen": true,

        "menuBarData": {

          "menuBar": false

        }

      }

    }

截图:

cke_1300.png

 

解决方案:

在快应用1101版本上,推出了一个fitCutout属性,是否在异形区域绘制内容,可以将异形屏的黑边去点,变成真正的全屏显示。只需要在manifest文件设置属性"fitCutout": "portrait|landscape"

修改代码:

  "display": {

    "pages": {

      "Hello": {

        "titleBarText": "TitleBar",

        "fullScreen": true,

        "menuBarData": {

          "menuBar": false

        },

        "fitCutout": "portrait|landscape"

      }

    }

  }

效果截图:

cke_3999.png

欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

标签:屏快,异形,适配,fitCutout,全屏,应用,true
From: https://www.cnblogs.com/developer-huawei/p/16890573.html

相关文章

  • 全屏
    参考网页https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen具体document.onclick=function(event){if(document.fullscreenElement)......
  • 可视化大屏的几种屏幕适配方案,总有一种是你需要的
    假设我们正在开发一个可视化拖拽的搭建平台,可以拖拽生成工作台或可视化大屏,或者直接就是开发一个大屏,首先必须要考虑的一个问题就是页面如何适应屏幕,因为我们在搭建或开发时......
  • 可视化大屏的几种屏幕适配方案,总有一种是你需要的
    假设我们正在开发一个可视化拖拽的搭建平台,可以拖拽生成工作台或可视化大屏,或者直接就是开发一个大屏,首先必须要考虑的一个问题就是页面如何适应屏幕,因为我们在搭建或开发......
  • pixi7微信小游戏适配来了
    pixi.js相比较egret,laya,cocos,phaser而言,该有的核心功能都有。自带的扩展功能有限,但是官网上扩展包的也是很多的,所以开发游戏没什么问题pixi.js包体小,性能强,代码质量高,......
  • 软件设计模式白话文系列(七)适配器模式
    1、描述适配器模式顾名思义就是将某个类的接口转换成客户端期望的另一个接口表示。适配器模式可以消除由于接口不匹配所造成的类兼容性问题。2、适用性客户端需要调用现......
  • 全屏
    //安装[email protected]//导入importscreenfullfrom'screenfull'//模块位置:<svg-iconicon-class="fullscreen"style="margin-right:20p......
  • rem 适配布局
    rem适配布局1、rem单位rem(rootem)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如,根元素(html)设置font-siz......
  • WPF通过wine适配统信uos系统
    环境准备环境准备直接安装wine7wine安装参考#开启32bit架构支持sudodpkg--add-architecturei386#下载添加仓库密钥sudowget-nchttps://dl.winehq.org/wi......
  • UGUI 3D粒子特效裁剪,层级,适配
    Unity里默认的粒子特效是3D渲染方式的,而UGUI又是特殊的渲染方式。如果想在UI里直接放入粒子特效,会导致:分层问题,粒子特效的层级排序由Z轴以及sortlayer决定,而UI的层级排......
  • 移动端适配rem/vw,vh原理(详细)
    参考https://juejin.cn/post/6981800084686143518了解像素相关知识:移动端适配掌握web开发基础系列--物理像素、逻辑像素、css像素为什么给750px的设计图其实我一直......