It appears that latest Chrome on Android 9 "Pie" does not behave as Safari on iPhone X when using the viewport-fit=cover. Safari stretches the content full screen, into the cutouts area while Chrome does not (see screenshot of Huawei Y6 below) Is this standard behavior on Android or a transitional phase to a Safari like behavior?
On iPhoneX the code below makes the content stretch edge to edge also into the cutouts area. Then, you compensate for the notch "eating" into the actual content by using the CSS safe area constants to apply margin, padding etc:
<meta name="viewport" content="width=device-width, viewport-fit=cover">
<style>
body {
padding-top: env(safe-area-inset-top);
}
</style>
On latest Chrome on Adroid 9 Pie the area in the "horns", next to the notch (the actual cutouts) is always "safe" and has either the default background color of the browser chrome (off-white) or whatever you define in the <meta name="theme-color"> tag. The CSS safe area constants do nothing cuz... there is nothing to safeguard against.
