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);
}
}