需求，新做了个app， 使用的是maui blazor技术，里面用了渐变背景，在默认启用SafeArea情况下，底部背景很突兀

1. 由于现版本maui在SafeArea有点bug，官方教程的<ContentPage SafeArea=false不生效，于是要用以下代码hack一下

            Microsoft.Maui.Handlers.LayoutHandler.Mapper.AppendToMapping("Custom", (h, v) =>
            {
                if (v is Layout layout)
                {
                    layout.IgnoreSafeArea = true;
                }
            });

带来的问题是，网页上下穿透了。

2. 继续深入研究，用以下代码设置刘海屏上边距

    protected override void OnAppearing()
    {
        base.OnAppearing();
        if (withSafeArea)
        {
            var safeInsets = On<iOS>().SafeAreaInsets();
                On<iOS>().SetUseSafeArea(false);
                safeInsets.Top = 35;
                Padding = safeInsets;
        } 
    }

存在的问题是，非刘海屏设备也设置了上边距

3. 最终代码，检查设备类型，按需配置上边距

using Microsoft.Maui.Controls.PlatformConfiguration;
using Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;

namespace MyApp.Maui;

public partial class MainPage : ContentPage
{
    bool withSafeArea = false;
    public MainPage()
    {
        InitializeComponent();

        if (DeviceInfo.Current.Idiom == DeviceIdiom.Phone)
        {
            var screenSize = DeviceDisplay.MainDisplayInfo;
            if (screenSize.Height / screenSize.Density >= 812.0f)
            {
                withSafeArea = true;
            }
        }

        if (withSafeArea) { 
            Microsoft.Maui.Handlers.LayoutHandler.Mapper.AppendToMapping("Custom", (h, v) =>
            {
                if (v is Layout layout)
                {
                    layout.IgnoreSafeArea = true;
                }
            });
        }
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        if (withSafeArea)
        {
            var safeInsets = On<iOS>().SafeAreaInsets();
                On<iOS>().SetUseSafeArea(false);
                safeInsets.Top = 35;
                Padding = safeInsets;
        } 
    }
}

4. 题外话，网页可加上 viewport-fit=cover 效果更好

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />