TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

New CSS units that account for mobile viewports with dynamic toolbars

59 pointsby robust-cactusover 2 years ago

11 comments

int_19hover 2 years ago
&quot;None of the viewport units take the size of scrollbars into account. On systems that have classic scrollbars enabled, an element sized to 100vw will therefore be a little bit too wide. This is as per specification.&quot;<p>Kind of amazing that this is literally the unit meant to solve such problems, and yet it doesn&#x27;t. And the GitHub discussion seems to imply that it&#x27;s mostly down to what the existing browsers did?<p><a href="https:&#x2F;&#x2F;github.com&#x2F;w3c&#x2F;csswg-drafts&#x2F;issues&#x2F;1766" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;w3c&#x2F;csswg-drafts&#x2F;issues&#x2F;1766</a>
评论 #33813703 未加载
评论 #33814239 未加载
评论 #33815311 未加载
评论 #33813693 未加载
langsoul-comover 2 years ago
I think the most annoying thing about responsive is how bloody manual it all is.<p>Small, medium, large font sizes. Different widths, heights and all that jazz.<p>Cant 100% vh or vw just recalculate based on screen elements?
评论 #33814167 未加载
评论 #33813244 未加载
评论 #33819401 未加载
kijinover 2 years ago
Still no standard to reliably detect when a virtual keyboard is covering half the viewport. And virtual keyboards have been around for much longer than dynamic toolbars on mobiles browsers!
评论 #33816074 未加载
robust-cactusover 2 years ago
So many options when all I ever wanted was 100dvh
评论 #33813237 未加载
评论 #33812964 未加载
Yuyudo_Comiketoover 2 years ago
No thanks, I&#x27;ll rather wait for CSS5 to thoroughly enjoy my hvlhlvh and t23ccwsvh units (held vertically in left hand large viewport height and tilted 23 degrees counter-clockwise small viewport height)
seydorover 2 years ago
it s so funny how CSS people did not think before providing a &#x27;solution&#x27; that fails the most useful use case, 100% height.
评论 #33815359 未加载
tobrover 2 years ago
&gt; Celebration<p>&gt; This web feature is now available in all three browser engines!<p>Lament<p>There are only three browser engines.
评论 #33815360 未加载
评论 #33813657 未加载
KrishnaAnarilover 2 years ago
This new unit is more significant on mobile browsers and as of now only firefox support it. I&#x27;ve verified it myself. Ref: <a href="https:&#x2F;&#x2F;caniuse.com&#x2F;?search=dvh" rel="nofollow">https:&#x2F;&#x2F;caniuse.com&#x2F;?search=dvh</a>
CGamesPlayover 2 years ago
The missing piece from these seems to be how you use them? When the page loads, is the viewport small or large? How does the CSS know?
评论 #33813524 未加载
dphnxover 2 years ago
Why oh why do they have to be three letter acronymns? I’m sure it’s fine if you’re immersed in front-end web development and have memorised the nuances of each unit, but as a back-end developer with a good working knowledge of CSS but for whom it isn’t my focus, I just know I’m going to have to constantly look these up every time I come across them.
评论 #33814851 未加载
andixover 2 years ago
Not confusing at all... &#x2F;s