Cordova iOS全屏问题：调用StatusBar接口后顶部出现状态栏高度边距

你提到用StatusBar.overlaysWebView(true)和StatusBar.hide()实现全屏，Android正常但iOS顶部还有状态栏高度的边距，即便已经把body的margin、padding设为0，且确认overlay生效。以下是几个针对性的解决步骤：

1. 确保Cordova配置正确 #

在项目根目录的config.xml中添加或确认以下配置：

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarHidden" value="true" />
<preference name="viewport-fit" value="cover" />

viewport-fit=cover会让WebView完全覆盖屏幕，忽略iOS的安全区域默认留白，这是解决顶部边距的关键配置之一。

2. 修正视口Meta标签 #

在index.html的<head>里，确保viewport标签包含viewport-fit=cover：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

这个设置会告诉iOS浏览器，页面可以延伸到安全区域之外，配合Cordova的配置就能消除顶部的默认边距。

3. 强化CSS全屏样式 #

除了body，还要给html元素重置边距，并设置绝对定位确保铺满屏幕：

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

如果用100vh导致高度超出，用绝对定位+宽高100%更稳定，避免视口单位带来的兼容性问题。

4. 确认StatusBar API的调用时机 #

必须在deviceready事件触发后再调用StatusBar相关方法，否则iOS上可能无法正确生效：

document.addEventListener('deviceready', function() {
    // 先设置overlay再隐藏状态栏
    StatusBar.overlaysWebView(true);
    StatusBar.hide();
}, false);

如果之前是直接在页面加载时调用，很可能因为Cordova插件还未初始化，导致配置没有生效。

5. 排查其他CSS干扰 #

检查项目中是否有其他全局样式（比如框架自带的重置样式、自定义的容器类）给页面元素添加了顶部内边距或外边距，尤其是针对iOS的媒体查询样式，可能会强制预留安全区域空间。

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