Bramus le enseña a Jake sobre todas las ventanas de visualización que existen en el navegador. Si tuviste problemas de diseño con la posición corregida, las unidades vw o la altura:100%, es probable que este episodio explique el motivo.
Capítulos:
- 00:00: Prólogo
- 00:17 - Introducción
- 01:03 - Navegadores de escritorio / La ventana de visualización de diseño
- 05:33 - El ICB
- 12:51: Unidades del viewport
- 16:07: Pellizcar zoom y la ventana visual visual
- 19:29: Ventana de visualización de diseño, ICB y ventana de visualización en navegadores para dispositivos móviles
- 23:30: La ventana gráfica grande, pequeña y dinámica
- 28:35: Las unidades de viewports y su relación con el ICB
- 30:25: Comportamiento de cambio de tamaño (en dispositivos móviles) cuando las áreas editables se enfocan
- 36:01 - La API de Virtual Keyboard
- 38:44: Una mirada a mi bola de cristal
- 42:04: Iniciativa de investigación de viewports de interoperabilidad de 2022
- 43:20: Epílogo
Resources:
- Viewports grandes, pequeñas y dinámicas → https://goo.gle/3qxhne7
- Evita que el contenido se oculte debajo del teclado virtual mediante la API de VirtualKeyboard → https://goo.gle/3U9rl2X
- Discusión sobre la investigación de viewport de 2022 en Interop → https://goo.gle/3DhBHYN
- Páginas de prueba de esfuerzo de investigación de viewport de Interoperabilidad de 2022 → https://goo.gle/3BDcuqy
- Problema de CSSWG sobre el posicionamiento y el comportamiento del cambio de tamaño de la viewport → https://goo.gle/3QJe12q
Especificaciones:
- (Diseño) Definición de viewport (especificación CSS2) → https://goo.gle/3DlfjxG
- Definición de bloque que contiene (especificación CSS2) → https://goo.gle/3Dl9hwN
- Longitudes relativas de la ventana de visualización (especificación de los valores CSS 4) → https://goo.gle/3ddLwvZ
- La ventana de visualización visual (MDN) → https://goo.gle/3L9PsKU
- API de Visual Viewport (especificación del CSSOM) → https://goo.gle/3qvAJk2
- Variantes de viewport (especificación de valores CSS 4) → https://goo.gle/3U7Wd3M
- Especificación del teclado virtual → https://goo.gle/3qzq7R2
Más videos de la serie HTTP 203 → http://goo.gle/HTTP203 Suscríbete a Google Chrome Developers aquí → https://goo.gle/ChromeDevs
Además, si disfrutaste este contenido, te recomendamos el podcast HTTP203 → https://goo.gle/HTTP203Podcast