Arsenal
Arsenal
  • 发布:2018-12-28 18:48
  • 更新:2019-05-06 22:52
  • 阅读:2988

uni-app 里如何让页面在 iPhone X 等全面屏手机上全屏显示(去掉安全区)

分类:uni-app

uni-app 里似乎默认对 iPhone X 之类的全面屏手机做了适配,但在有些场景下,全屏显示的效果更好。

比如我调用了扫码的接口(uni.scanCode),底部的灰条就显得有些不合适。如下图所示:

请问有什么办法可以去掉底部的灰条,让页面全屏显示吗?

2018-12-28 18:48 分享
已邀请:
352489099@qq.com

352489099@qq.com - 789啊啊

遇到相同问题,怎么在单个页面设置取消安全区域,别的地方不取消?

DCloud_IOS_XTY

DCloud_IOS_XTY

mainfest.json plus节点下配下safearea  
    "safearea": {  
        "background":"#CCCCCC",    // 安全区域外的背景颜色,默认值为"#FFFFFF"  
        "bottom":{    // 底部安全区域配置  
            "offset":"none|auto"       // 底部安全区域偏移,"none"表示不空出安全区域,"auto"自动计算空出安全区域,默认值为"none"  
        },  
        "left": {    // 左侧安全区域配置(横屏显示时有效)  
            "offset":"none|auto"  
        },  
        "right: {    // 右侧安全区域配置(横屏显示时有效)  
            "offset":"none|auto"  
        }  
    }  
    iPhoneX的安全区域配置。  
Arsenal

Arsenal (作者)

@DCloud_IOS_XTY 感谢回复。

经过我的测试,还有2个问题:

  1. "safearea" 应该放在 mainfest.json 文件的 "app-plus" 节点下,放在 "plus" 节点下不起效。
  2. 设置后,普通页面确实已经生效,但在 扫一扫 里,底部依然存在安全区,我就不截图了,和上面的效果一样。

可以用 hello-uni-app 项目测试,可以重现我说的问题。

  • DCloud_IOS_XTY

    http://ask.dcloud.net.cn/article/35386

    2019-01-09 19:01

  • Arsenal (作者)

    回复 DCloud_IOS_XTY: 你发的链接里只讲了Webview页面该如何设置,在uni-app里不适用吧。而且扫码不是原生功能吗,我可以在扫码那里获取到当前的webview吗?

    2019-01-10 10:10

  • DCloud_IOS_XTY

    可以设置放到page 的app-plus下 https://uniapp.dcloud.io/collocation/pages?id=app-plus

    2019-01-10 10:31

270315475@qq.com

270315475@qq.com

怎么在单个页面设置取消安全区域,别的地方不取消?

Arsenal

Arsenal (作者)

@DCloud_IOS_XTY

我按照你的方式,在 page.json 的 globalStyle 节点下这样设置:

        "app-plus":{  
            "contentAjust":false  
        }  

但还是没有效果。可能是我之前没有描述清楚,我是想让 uni-app 里的扫码页面的底部不要出现安全区,如上面我发的截图所示,底部那块灰色不太好看,能否在扫码页面里把灰色那块去掉?

扫码我是调用的 uni.scanCode ,调用后自动打开了一个新页面,这个新页面应该是我们没办法控制的,因为文档里没有相关的设置 https://uniapp.dcloud.io/api/system/barcode

sharper

sharper - 坐看风云涌起

同问

mingzaily@163.com

mingzaily@163.com - mingzaily

请问解决了吗

  • Arsenal (作者)

    没有解决

    2019-05-07 09:01

  • 952001124@qq.com

    全局去掉安全区,对需要安全区的页面单个适配即可

    2019-05-07 11:00

要回复问题请先登录注册