BramusSchool は、ブラウザに存在するすべてのビューポートについて Jake を学びました。固定位置、vw 単位、高さ:100% などでレイアウトに関する問題が発生した場合は、このエピソードでその理由をおそらく説明します。
章:
- 00:00 - プロローグ
- 00:17 - 導入
- 01:03 - デスクトップ ブラウザ / レイアウト ビューポート
- 05:33 - ICB
- 12:51 - ビューポートの単位
- 16:07 - ピンチズーム / ビジュアル ビューポート
- 19:29 - モバイル ブラウザのレイアウト ビューポート、ICB、ビジュアル ビューポート
- 23:30 - 大、小、動的なビューポート
- 28:35 - ビューポートの単位と ICB との関係
- 30:25 - 編集可能な領域にフォーカスが当たったときのサイズ変更動作（モバイル）
- 36:01 - Virtual Keyboard API
- 38:44 - 水晶玉ゲーム
- 42:04 - 相互運用 2022 ビューポート調査の取り組み
- 43:20 - エピローグ
リソース:
- 大、小、動的なビューポート → https://goo.gle/3qxhne7
- VirtualKeyboard API を使用して、仮想キーボードの下にコンテンツが隠れないようにする → https://goo.gle/3U9rl2X
- 相互運用 2022 年のビューポート調査の取り組み → https://goo.gle/3DhBHYN
- 相互運用 2022 ビューポート調査努力テストのページ → https://goo.gle/3BDcuqy
- ビューポートのサイズ変更動作と配置に関する CSSWG の問題 → https://goo.gle/3QJe12q
仕様:
- （レイアウト）ビューポートの定義（CSS2 仕様）→ https://goo.gle/3DlfjxG
- Containing Block Definition（CSS2 仕様）→ https://goo.gle/3Dl9hwN
- ビューポートの相対的長さ（CSS 値 4 仕様）→ https://goo.gle/3ddLwvZ
- ビジュアル ビューポート（MDN）→ https://goo.gle/3L9PsKU
- Visual Viewport API（CSSOM 仕様）→ https://goo.gle/3qvAJk2
- ビューポートのバリエーション（CSS 値 4 仕様）→ https://goo.gle/3U7Wd3M
- 仮想キーボードの仕様 → https://goo.gle/3qzq7R2
HTTP 203 シリーズのその他の動画 → http://goo.gle/HTTP203 Google Chrome Developers に登録 → https://goo.gle/ChromeDevs
HTTP203 ポッドキャストもおすすめです → https://goo.gle/HTTP203Podcast