Брамус рассказывает Джейку обо всех окнах просмотра, существующих в браузере. Если у вас были проблемы с макетом с фиксированным положением, единицами измерения vw или высотой: 100%, этот эпизод, вероятно, объяснит почему.
Главы:
- 00:00 - Пролог
- 00:17 - Вступление
- 01:03 – Браузеры для настольных компьютеров / Окно просмотра макета
- 05:33 - МКБ
- 12:51 – Единицы видового экрана
- 16:07 – Pinch Zoom/Визуальное окно просмотра
- 19:29 – Область просмотра макета, ICB и визуальная область просмотра в мобильных браузерах
- 23:30 – Большое, маленькое и динамическое окно просмотра
- 28:35 - Единицы видовых экранов и их связь с ICB
- 30:25 – Изменение размера (на мобильных устройствах), когда редактируемые области получают фокус
- 36:01 – API виртуальной клавиатуры
- 38:44 – Взгляните на мой хрустальный шар
- 42:04 — Исследование области просмотра Interop 2022
- 43:20 - Эпилог
Ресурсы:
- Большой, маленький и динамический видовые экраны → https://goo.gle/3qxhne7
- Предотвратите скрытие контента под виртуальной клавиатурой с помощью VirtualKeyboard API → https://goo.gle/3U9rl2X
- Обсуждение усилий по расследованию Viewport в Interop 2022 → https://goo.gle/3DhBHYN
- Страницы тестирования усилий по исследованию области просмотра Interop 2022 → https://goo.gle/3BDcuqy
- Проблема CSSWG, связанная с изменением размера области просмотра и позиционированием → https://goo.gle/3QJe12q
Технические характеристики:
- (Макет) Определение видового экрана (спецификация CSS2) → https://goo.gle/3DlfjxG
- Содержащее определение блока (спецификация CSS2) → https://goo.gle/3Dl9hwN
- Относительные длины области просмотра (спецификация значений CSS 4) → https://goo.gle/3ddLwvZ
- Визуальное окно просмотра (MDN) → https://goo.gle/3L9PsKU
- API Visual Viewport (спецификация CSSOM) → https://goo.gle/3qvAJk2
- Варианты области просмотра (спецификация значений CSS 4) → https://goo.gle/3U7Wd3M
- Спецификация виртуальной клавиатуры → https://goo.gle/3qzq7R2
Больше видео из серии HTTP 203 → http://goo.gle/HTTP203 Подпишитесь на разработчиков Google Chrome здесь → https://goo.gle/ChromeDevs
Также, если вам понравилось, вам может понравиться подкаст HTTP203 → https://goo.gle/HTTP203Podcast