モバイル端末の水平および垂直画面ビューポート検出を決定するための js のいくつかの方法

// 視覚的なビューポートのサイズを取得します（垂直スクロールバーを含む）
iw = window.innerWidthとします。
 ih = ウィンドウの内側の高さ;
コンソールにログ出力します。

// 視覚的なビューポートのサイズを取得します (サイドバー、ウィンドウ クロム、ウィンドウのサイズ変更用の境界線を含むコンテンツ領域のサイズ)
ow = window.outerWidthとします。
 oh = ウィンドウの外側の高さ;
console.log(わー、あー);

// 画面の理想的なビューポート サイズを取得します (固定値 (画面解像度サイズ))
sw = window.screen.width とします。
 sh = ウィンドウの画面の高さ;
コンソールにログ出力します。

// ブラウザの利用可能なウィンドウのサイズを取得します（パディングを含みますが、垂直スクロールバー、境界線、余白は除きます）
aw = window.screen.availWidthとします。
 ah = window.screen.availHeight;
コンソールにログ出力します。

// パディング、スクロールバー、境界線、マージンを含む let dow = document.documentElement.offsetWidth,
 doh = document.documentElement.offsetHeight;
コンソールにログ出力します。

// スクロールバーを使用せずにビューポート内のすべてのコンテンツに収まるために必要な最小の幅と高さ let dsW = document.documentElement.scrollWidth,
 dsH = document.documentElement.scrollHeight;
コンソールにログ出力します。

// 要素のパディングを含みますが、境界線、余白、垂直スクロールバーは含みません。let cw = document.documentElement.clientWidth,
 ch = document.documentElement.clientHeight;
コンソールにログ出力します。

// window.orientation: 画面の回転方向を取得します window.addEventListener('resize', () => {
 // 通常の向きまたは画面を180度回転 if (window.orientation === 180 || window.orientation === 0) {
  console.log('垂直画面')
 }

 // 画面は時計回りに90度、または反時計回りに90度回転します。if (window.orientation === 90 || window.orientation === -90) {
  console.log('水平画面')
 }
});

/*水平および垂直画面の CSS 検出*/
@media 画面と (orientation:portrait) {

 /* 縦画面 */
 ＃アプリ {
  幅：100vw;
  高さ：100vh;
  背景: 赤;
 }
}

@media screen と (orientation:landscape) {

 /* 横画面 */
 ＃アプリ {
  幅：50vw;
  高さ：100vh;
  背景: 緑;
 }
}

<meta name="viewport" content="width=デバイス幅、初期スケール=1、最小スケール=1、最大スケール=1、ユーザースケーラブル=いいえ" />

<meta name="viewport" content="viewport-fit=cover" />

/* 下部の固定ナビゲーション バーを使用する場合は、パディング値を設定する必要があります。 */
体 {
 パディング下部: 定数(セーフエリアインセット下部);
 パディング下部: env(セーフエリアインセット下部);
}