Cordova iOS状态栏适配：iPhone X白条问题解决方案咨询

不用CSS就能解决这个问题的核心思路是针对刘海屏（iPhone X及以后）和非刘海屏iOS设备，分别设置StatusBarOverlaysWebView的值。下面是具体实现步骤：

1. 先确保依赖插件安装 #

如果还没装cordova-plugin-device，先安装它来获取设备信息：

cordova plugin add cordova-plugin-device

2. 在deviceready事件中添加动态适配逻辑 #

Cordova的API必须在deviceready触发后才能调用，所以我们在这里写设备判断和状态栏设置代码：

document.addEventListener('deviceready', function() {
    // 检测当前设备是否是iPhone X及以后的刘海屏机型
    function isNotchIphone() {
        // 两种检测方式，选一种或者结合用都可以
        // 方式1：匹配设备型号（覆盖已知刘海屏机型）
        const modelMatches = /iPhone X|iPhone 11|iPhone 12|iPhone 13|iPhone 14|iPhone 15/.test(device.model);
        // 方式2：利用iOS 11+的安全区域API，更通用（刘海屏顶部安全边距大于普通设备的20px）
        const safeAreaMatches = window.safeAreaInsets && window.safeAreaInsets.top > 20;
        
        return modelMatches || safeAreaMatches;
    }

    if (isNotchIphone()) {
        // 刘海屏设备：启用状态栏覆盖，避免出现白色空白条
        StatusBar.overlaysWebView(true);
        // 可选：根据页面背景调整状态栏文字颜色，确保可读性
        StatusBar.styleLightContent(); // 浅色文字，适合深色页面背景；反之用styleDarkContent()
    } else {
        // 非刘海屏设备：禁用状态栏覆盖，避免内容被状态栏遮挡
        StatusBar.overlaysWebView(false);
        // 可选：设置状态栏背景色，和你的页面顶部背景保持一致
        StatusBar.backgroundColorByHexString("#ffffff"); // 替换成你的页面顶部背景色
    }
}, false);

3. 配置文件默认值（可选但推荐） #

在config.xml里先设置默认的StatusBarOverlaysWebView为false，确保非刘海屏设备打开App时默认就是正确状态，然后通过代码覆盖刘海屏设备的设置：

<preference name="StatusBarOverlaysWebView" value="false" />

为什么这个方法有效？ #

• 完全不需要修改CSS：所有适配逻辑都通过Cordova的状态栏和设备插件API完成，避免了CSS中针对不同设备的复杂媒体查询。
• 适配更精准：无论是通过设备型号还是安全区域检测，都能准确区分刘海屏和非刘海屏设备，分别应用对应的状态栏设置。
• 扩展性强：新出的iPhone刘海屏机型，用安全区域检测的方式不需要更新代码就能自动适配。

内容的提问来源于stack exchange，提问作者Yuri