IOS のネストされた h5 の上部をステータス バーに埋め込むことはできません

シナリオ: h5 はネイティブ アプリにネストされており、ステータス バーの背景を制御するには h5 が必要です。しかし、背景色を設定した後、Android では有効であることがわかりましたが、IOS では無効であることがわかりました。IOS が取得できるのは次のとおりです。ステータスバーとボトムバーの高さを削除する 後で確認したところ、 h5ページの上部にステータスバーを含めることができるように、h5が安全領域に収まることを確認する必要があります画像をステータスバースタイルに埋め込むことができます。

テクノロジー: umijs+ts

次の構成を行う必要があります。

umi3 以下の場合は、document.ejs に以下を追加する必要があります。

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

umi4 にはドキュメント エントリ ファイルがありません。.umirc.ts で設定する必要があります。

metas: [
    {
      name: 'viewport',
      content:
        'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover',
    },
  ],

このように、h5 はページ全体を取得し、ステータス バーのスタイルと背景を独自に制御できます。

上記の不備やご質問がございましたら、ご連絡ください〜