Skip to content
Hallway
0:00 / 0:00

#viewport#dvh#dvw

It's viewports all the way down | HTTP 203

Chrome for Developers

822K subscribers • 22 videos on Hallway

YouTube
  • Recommended by 2 people: 2 in engineering communities.
  • Presented by Bramus Van Damme and Jake Archibald

Intermediate. Assumes working knowledge.

33K views4 years ago2 recommendations

Web developmentCSS and layoutHow browsers workWeb performance

Bramus Van Damme and Jake Archibald explain the different types of browser viewports, mobile resize behaviors, and new viewport units.

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: - Prologue - Intro - Desktop Browsers / The Layout Viewport - The ICB - Viewport Units - Pinch Zoom / The Visual Viewport - The Layout Viewport, ICB, and Visual Viewport on Mobile Browsers - The Large, Small, and Dynamic Viewport - Viewports Units and their relation to the ICB - Resize Behavior (on mobile) when editable areas gain focus - The Virtual Keyboard API - A look into my Crystal Ball - Interop 2022 Viewport Investigation Effort - Epilogue Resources: The Large, Small, and Dynamic Viewports → goo.gle/3qxhne7 Prevent content from being hidden underneath the Virtual Keyboard by means of the VirtualKeyboard API → goo.gle/3U9rl2X Interop 2022 Viewport Investigation Effort Discussion → goo.gle/3DhBHYN Interop 2022 Viewport Investigation Effort Test Pages → goo.gle/3BDcuqy CSSWG Issue on Viewport Resize Behavior and Positioning → goo.gle/3QJe12q Specifications: (Layout) Viewport Definition (CSS2 Specification) → goo.gle/3DlfjxG Containing Block Definition (CSS2 Specification) → goo.gle/3Dl9hwN Viewport Relative Lengths (CSS Values 4 Specification) → goo.gle/3ddLwvZ The Visual Viewport (MDN) → goo.gle/3L9PsKU The Visual Viewport API (CSSOM Specification) → goo.gle/3qvAJk2 Viewport Variants (CSS Values 4 Specification) → goo.gle/3U7Wd3M Virtual Keyboard Specification → goo.gle/3qzq7R2 More videos in the HTTP 203 series → goo.gle/HTTP203 Subscribe to Google Chrome Developers here → goo.gle/ChromeDevs Also, if you enjoyed this, you might like the HTTP203 podcast → goo.gle/HTTP203Podcast #HTTP203 #ChromeDeveloper #WebDev

Why it's here

2 people recommend this

What people say. Recommended as an excellent explanation of viewport units and how mobile browsers handle layout heights.

u/Marble_Wraithin r/Frontend • Recommends

On “100vh and 100vw don't work on mobile devices?”

It's not worth using viewport units right now. The dynamic ones (dvh, dvw, dmin, dmax...) are the way to go, but they don't have comprehensive support yet. Discussion between chrome dev team members about the W3 spec + browser features / implementations. link to this video
3View on Reddit

u/Dinoisflyin r/Frontend • Recommends

On “100vh and 100vw don't work on mobile devices?”

Recommended video about viewport units and why we needed new ones: link to this video Already supported by safari & Firefox and will be in the next version of chrome. So you can pretty much start using dvh and dvw.
2View on Reddit

u/Marble_Wraithin r/Frontend • Recommends

On “Advice for experienced dev taking on front-end role?”

Disclaimer: I didn't shift stack, i've been doing both front-end and back-end since about 2011 with some dev-ops / network engineering mixed in. ### General - Build for firefox, test on chrome and safari iOS. The last one being the pain in the ass of the group. - Tooling takes away alot of headaches and saves yourself from "being clever" (stupid). Most front-end tooling can be run out of the nodeJS runtime, so even if your stack isn't JS oriented, it's still worth running node. The obvious shoutouts: Vite, eslint, stylelint, postCSS, browserslist. Playwright is somethin else you can give a look at if your scope of work is large enough. - Understand the browser runtime i.e. how it handles…
2View on Reddit

u/Marble_Wraithin r/Frontend • Recommends

On “confusion regarding height property in css”

Might be best if you take a screencapture video of what you're experiencing and post the link. It's difficult to imagine just based on the description. That being said using 100vh is terrible because of how mobile browsers behave. I'd suggest watching this: link to this video
2View on Reddit