Reactフルスクリーンの作成方法

ブラウザウィンドウいっぱいの画面.
完全なHeightの旅を記録する
まず,単純な全画面構成の容器divラベルのheightが100 vhであることを示した.
vhは、ビューポートの高さに応じて変化する単位です.1 vhはビューポートの高さの1%であり、100 vhはビューポートの100%、すなわち全高と見なすことができる.

これは本当に画面がコンパクトに見えます.
しかし、携帯電話の画面で接続してみるとおかしい.

間隔が合わない問題は抜きにして、画面は巧みに垂れ下がっている.
調べてみると、計算vhを移動するとき、上のurlバーと下のナビゲーションバーの高さが含まれています.だから少し違います.
Google検索で解決策が見つかりました.
まず、urlバーとナビゲーションバーの高さを含まない私のvhを探す必要があります.
ファイルに次のコードを追加します.

  useEffect(() => {
    let vh = 0;
    vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty("--vh", `${vh}px`);
  }, [window.innerHeight]);

setProperty()で新しいスタイリストを指定できます.
上記の式は、ウィンドウ(すなわち、ビューポートの内側の画面サイズ)が変化するたびにvhを計算し、--vhというプログラムを適切な値に設定することを示しています.
次に、スクリーンを満たすコンテナdivラベルのスタイルコードのheight値を次のように変更します.

height: "calc(var(--vh, 1vh) * 100)"

mui styledを使用しているのでjsx構文に従います.
var()は、カスタム属性またはCSS変数の値を取得するために使用される.1番目の引数は、値をインポートするカスタム属性の名前で、2番目の引数は、属性が無効な場合に使用される代替値を指定します.
calc()は、css内で計算式を指定する際に用いられる関数である.
すなわち、上記の式を解くと、「heightの値、vhの値に100を乗じた値」として指定される.--vhがない場合は、1 vhに100を乗じた値を指定できます」.
これらの変更が反映されている場合!

ご希望のように、モバイルデバイスでも完全な画面を得ることができます.
しかし、もう一つ問題があります.

画面の内容が100 vhを超えると、上半分が巻き上げられ、下半分が底色を破られます.つまり撮れない
いずれにしても、これはベースとなる容器divのheightを100 vhに固定したことによる可能性がある.
この問題を解決するためにmin-heightを使用した.
コンテナdivラベルのスタイルコードでheight:に設定されている部分をminheight:に変更します.以下のように変更します.

// height: "calc(var(--vh, 1vh) * 100)",
  minHeight: "calc(var(--vh, 1vh) * 100)",

min-heightは要素の最小高さを設定する値で、その値を上から下まで求めた高さ値に変更し、heightを固定するコードを注記すると、コンテンツがあふれたページの画面の一部が切り取られます.

修正後、スクリーンがカットされた問題を解決しました.
しかし、もう一つの正常な画面に問題が発生しました.

突然画面の内容が上がってきた.
わぁ~
しばらくデバッグした結果、以下の理由が分かりました.
現在、コンテナdivコンポーネントは次のように構成されています.

	<AppWrapper>
        <App>{children}</App>
    </AppWrapper>

AppWrapperは背景画像を設定するためのdiv Stardコンポーネントであり、Appはdisplay:flexのような要素の配置を担当するdiv Stardコンポーネントである.
私が今まで興奮してheightを調整していた部分はAppWrapper
スタイル宣言コードは次のとおりです.

const AppWrapper = styled("div")({
  width: "100vw",
  minHeight: "calc(var(--vh, 1vh) * 100)",
  backgroundImage: `url(${RiverFord})`,
  backgroundPosition: "center",
  backgroundSize: "100% 100%",
  backgroundAttachment: "fixed",
});

const App = styled("div")({
  padding: "0.5rem",
  display: "flex",
  backgroundColor: "none",
  flexDirection: "column",
  alignItems: "center",
  justifyContent: "center",
  width: "100%",
  height: "100%",
});

ご覧のようにAppのheightは100%です.つまり、親AppWrapperのheightに頼っているのです.
しかしborder:1 px solid redは確認しましたが、今小さくなっているのはAppコンポーネントです.
親要素のheightが消えたのは、対応する相対値を呼び出すことができないために発生したバグの可能性があると推測されます.
どうしてmin-height値が読めないのですか?これは知らない
ソリューション:
まず、Appのheightプロパティを削除し、AppWrapperにdisplay:“flex”を追加しました.
display flexには、各プロパティを詳細に説明するサイトリンクが付属しています。
display「flex」宣言では、flex-direction(スタック方向指定プロパティ)のデフォルト値は「row」(横スタック)であり、align-items(クロス軸ソート方法プロパティ)のデフォルト値は「stretch」(コンテナのクロス軸を埋めるためにitemの幅を増やす)です.
したがって、私の現在の状態では、AppWrapperはdisplay:“flex”を宣言するだけで、複数のデフォルト値を適用し、サブコンポーネントに対応するAPPの横交差軸幅、すなわちheightを自動的に増加させることができます.

解決しました!