Viewport

Bramus schools Jake about all the viewports that exist in the browser. If you've had layout issues with position fixed, vw units, or height:100%, this episode will probably explain why. Chapters: 00:00 - Prologue 00:17 - Intro 01:03 - Desktop Browsers / The Layout Viewport 05:33 - The ICB 12:51 - Viewport Units 16:07 - Pinch Zoom / The Visual Viewport 19:29 - The Layout Viewport, ICB, and Visual Viewport on Mobile Browsers 23:30 - The Large, Small, and Dynamic Viewport 28:35 - Viewports Units and their relation to the ICB 30:25 - Resize Behavior (on mobile) when editable areas gain focus 36:01 - The Virtual Keyboard API 38:44 - A look into my Crystal Ball 42:04 - Interop 2022 Viewport Investigation Effort 43:20 - Epilogue Resources: The Large, Small, and Dynamic Viewports → https://goo.gle/3qxhne7 Prevent content from being hidden underneath the Virtual Keyboard by means of the VirtualKeyboard API → https://goo.gle/3U9rl2X Interop 2022 Viewport Investigation Effort Discussion → https://goo.gle/3DhBHYN Interop 2022 Viewport Investigation Effort Test Pages → https://goo.gle/3BDcuqy CSSWG Issue on Viewport Resize Behavior and Positioning → https://goo.gle/3QJe12q Specifications: (Layout) Viewport Definition (CSS2 Specification) → https://goo.gle/3DlfjxG Containing Block Definition (CSS2 Specification) → https://goo.gle/3Dl9hwN Viewport Relative Lengths (CSS Values 4 Specification) → https://goo.gle/3ddLwvZ The Visual Viewport (MDN) → https://goo.gle/3L9PsKU The Visual Viewport API (CSSOM Specification) → https://goo.gle/3qvAJk2 Viewport Variants (CSS Values 4 Specification) → https://goo.gle/3U7Wd3M Virtual Keyboard Specification → https://goo.gle/3qzq7R2 More videos in the HTTP 203 series → http://goo.gle/HTTP203 Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs Also, if you enjoyed this, you might like the HTTP203 podcast → https://goo.gle/HTTP203Podcast #HTTP203 #ChromeDeveloper #WebDev