1. 在cordova项目的config.xml中指定StatusBarOverlaysWebView（需要cordova-plugin-statusbar插件支持），表示应用界面是否覆盖状态栏（系统最上方显示时间、信号、电量的地方）。Android设为false，iOS设为true。设为true可以达到沉浸式的效果。
<platform name="android">
<preference name="orientation" value="portrait" />
<preference name="StatusBarOverlaysWebView" value="false" />
</platform>
<platform name="ios">
<preference name="orientation" value="portrait" />
<preference name="StatusBarOverlaysWebView" value="true" />
</platform>
2. 在html的头部标签里指定viewport的 viewport-fit=cover，让页面空间撑满显示屏。
<head> ... <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover"> ... </head>
3. 设置页面容器的padding为safe-area相关值。safe-area是iphone自带的css环境变量，标记各边的安全边距，参考 MDN文档 。
.container{ padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 50px); }
这是比较粗暴的做法。实际的app内头部通常有个navbar，底部有个toolbar。可以这样设置他们的高度：
.navbar{ height:calc(env(safe-area-inset-top) + 44px); padding-top: env(safe-area-inset-top); } .toolbar{ height:calc(env(safe-area-inset-bottom) + 44px); padding-bottom: env(safe-area-inset-bottom); }
4. 对于Android，如果设置 StatusBarOverlaysWebView 为true，建议使用css自定义变量来控制头部的内边距。
:root{ --safe-area-top: 44px; --safe-area-bottom: 0px; --safe-area-right: 0px; --safe-area-left: 0px; } body{ padding-left: var(--safe-area-left); padding-right: var(--safe-area-right); } .navbar{ height:calc(var(--safe-area-top) + 44px); padding-top: var(--safe-area-top); }
进一步的思路：根据机型指定特定的边距；对于曲面屏、瀑布屏，还可以设置两侧的safe-area来优化显示效果。
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
if(device.model && device.model=="LIO-AL00"){
//如果是华为Mate30pro，则插入自定义safe-area，左右两侧空出一定距离
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML=":root{ --safe-area-left:24px;--safe-area-right:24px }";
document.getElementsByTagName('head').item(0).appendChild(style);
}
}