uni-app快速入手 ——（7）uni-app是用webview在iPhoneX以上机型解决“刘海”问题，去除安全区问题

你的名字 2023-02-23 08:06 7阅读 0赞

记录一下

在uni-app中使用webview 页面出现刘海问题，查询资料解决

iphoneX的“刘海”为相机和其他组件留出了空间，同时在底部也留有可操作区域。那么网站边尴尬了~被限制在了这样的“安全区域”内，两边会出现一道白条。解决的方案是：1、给body添加一个background；2、添加viewport-fit=cover meta标签，使页面占满整个屏幕。

![format_png][]

这样，“安全区域”将由你决定~~look this :Stephen Radford 文档

**为了处理这些需求，iOS 11 的 Safari 引入了一些 constant、env 来处理 viewport-fit=cover 属性。**

*  safe-area-inset-top
 *  safe-area-inset-right
 *  safe-area-inset-left
 *  safe-area-inset-bottom

**这些值可以应用到 margin、padding 上，也可以应用到绝对定位的 top 或 left 上。**

在网页的 container 上添加如下代码:

padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

刘海、安全区域和 fixed 定位还会造成其他尴尬的情景。[Darryl Pogue 报告][Darryl Pogue]：

iOS 11 和早期版本的差异性在于 webview 内容遵循安全区域。也就是说，如果你在顶部设置一个 top 为 0 的 fixed 定位的 header，实际位置会出现屏幕顶部以下 20px 处，和状态栏底部是对齐的。当向下滚动的时候，会向上移动到状态栏的后面；当向上滚动时，会再次滑到状态栏的下方（网页内容会在那条尴尬的 20px 的缝隙中显示）。

可喜可贺的是，添加一个 `viewport-fit=cover` 标签就可以一键搞定。

## 媒体查询方式 ##

/*iPhoneX的适配*/
        @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
               /*添加底部适配*/
            .l_o_btm{padding-bottom: 1.7rem;}
             /*增加头部适配层*/
            .has-topbar {height: 100%;box-sizing: border-box;padding-top: 44px;}
            .has-topbar:before {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 44px;background-color: #000000;z-index: 9998;}
        }

\------------------------------------------分割-------------------------------------------------------------------------

新版本webview调整了适配沉浸式的规则，开发者可以更灵活的根据自己的需要进行沉浸式模式的适配，  
这种情况下webview会自动调整内容区域避免和安全区域重合，一些老项目升级后如不做处理在沉浸式模式下顶部会显示灰条或者其他显示异常，该问题可以通过以下方式解决：  
**注意：webview style 中位置区域的计算是包含安全区域的**  
在meta节点中添加viewport-fit，关于viewport-fit 的详细说明可以自己百度下

如果想和老版本保持一致可以设置webview style 的contentAdjust属性(该属性不支持动态修改)  
false 表示不调整如下:

// 5+App  
     var wb = new plus.webview.create("url","id", {contentAdjust:false});  
    //uniapp  
        "pages": [  
            {  
                "path": "....",  
                "style": {  
                    "app-plus": {  
                          "contentAdjust":false

记录一下，上面在web页面加  viewport-fit=cover 解决了遇到的问题

\----------------------------------------------分割---------------------------------------------------

在uni-app内部页面 在iPhonex+以上机型会出现底部安全区

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

在manifest.json 页面配置

在app-plus 中加"safearea"

"safearea": { //安全区域配置，仅iOS平台生效  
                "background": "#CCCCCC", //安全区域外的背景颜色，默认值为"#FFFFFF"  
                "bottom": { // 底部安全区域配置  
                    "offset": "none|auto" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"  
                },
                "left": { //左侧安全区域配置（横屏显示时有效）  
                    "offset": "none|auto"
                },
                "right": { //右侧安全区域配置（横屏显示时有效）  
                    "offset": "none|auto"
                }
            },

如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTI0NzI3NC8yMDE3MTEvMTI0NzI3NC0yMDE3MTEwMzE0MDUzMzI3OS03Mzg4NDEyNjEucG5n?x-oss-process=image/format,png
[Darryl Pogue]: https://ayogo.com/blog/ios11-viewport/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200710172132413.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200710172443774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ==,size_16,color_FFFFFF,t_70