uni-app 打包后，iphone X显示不了subNVues，其他型号真机测试正常

类别	信息
产品分类	uniapp/App
PC开发环境	Windows
PC版本号	w10
HBuilderX	正式
HBuilderX版本号	3.4.7
手机系统	iOS
手机版本	iOS 14
手机厂商	苹果
手机机型	iPhone X
页面类型	nvue
Vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

操作步骤：

<view>
    <web-view :style="{height:mapHeight+'px',width:'750rpx',background:'#377df6'}" src="/hybrid/html/demo/index.html"></web-view>
</view>

所以在page.json中，给login加入subNVues弹窗

{
    "path": "pages/login",
    "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false,
        "navigationStyle": "custom",
        "navigationBarTextStyle": "white",
        "subNVues": [{
            "id": "popup",
            "path": "pages/subNVue/popup",
            "style": {
                "position": "popup",
                "margin": "auto",
                "width": "100%",
                "height": "100%",
                "background": "rgba(0,0,0,0.1)",
                "zindex": "999999"
            }
        }]
    }
}

预期结果：

webview引入js动画作为背景，sunNvues显示弹窗显示登陆

实际结果：

iPhoneX只显示webview背景

bug描述：

由于登陆页用了 web-view，pages.json中给登录页加了subNVues弹窗，真机测试能显示！打包后所有安卓正常，iPhone 10正常，公司两个iPhone X都显示不了。

sinazl 1楼•19 天前作者

在 uni-app 中，subNVue 是一种用于创建原生子窗口的技术，通常用于实现一些原生级别的 UI 效果。如果你在 iPhone X 上遇到 subNVue 无法显示的问题，而其他型号的 iPhone 正常，可能是由于以下原因导致的：

1. 屏幕适配问题

iPhone X 的屏幕尺寸和分辨率与其他 iPhone 不同，特别是它的刘海屏设计。subNVue 的布局可能没有正确适配 iPhone X 的屏幕。

解决方案：

检查 subNVue 的布局代码，确保它能够适配不同尺寸的屏幕。
使用 uni.getSystemInfoSync() 获取设备信息，动态调整 subNVue 的位置和大小。

const systemInfo = uni.getSystemInfoSync();
const isIphoneX = systemInfo.model.indexOf('iPhone X') !== -1;

if (isIphoneX) {
    // 针对 iPhone X 的特殊处理
}

2. 安全区域（Safe Area）问题

iPhone X 引入了安全区域的概念，subNVue 可能被刘海或底部 Home 指示条遮挡。

解决方案：

使用 safe-area-inset 相关的 CSS 属性来确保内容不被遮挡。
在 subNVue 的样式中添加 padding-top 和 padding-bottom 来避开安全区域。

.sub-nvue {
    padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
    padding-top: env(safe-area-inset-top); /* iOS 11.2+ */
    padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
    padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
}