How did you work around vh/vw issues, inconsistent on desktop and mobile? Did you stop using them or find some combination that does the same thing in the end? It really depends on the specific problem. The scrollbar thing in many cases might not be a big problem, if you do 100vw then it’s going to be a problem because you’re going to have differences on the browser edge, but if it’s 50% of the browser width then you’re probably not going to care so much if scrollbars are included or not. Then just individual workarounds. If you really needed to be, maybe do it with a bit of JavaScript, with resize event listener and check the browser properties window.clientWidth, whatever works, test which combination of these is going to work to fix a given problem.
Intended effect for use of vh? To fill the viewport? Or the address bar?
Problem was with the 3D room planner app. Just want to have the whole viewport filled and then the problem is what even is the whole viewport if you scroll in and out, obviously the size is going to change. I think on most mobile devices the viewport unit is considered without the scrollbar so then initially it’s going to be too big and you’re going to have a scroll which feels really funny, because if you scroll down, the scrollbar’s going to disappear and then it’s actually going to be the right size. It’s not exactly how you’d want it, it’s not going to just fill the viewport and you’re done, it’s going to create a scroll effect and because the viewport changes size again the scrollbar’s going to disappears.
Note: Scrollbar here refers to the address bar.
So whatever the size of the address bar, just fill the available space and not have any scrolling? Yeah that’s one use case, to be able to fill the screen and not have scrolling. And maybe also to be able get rid of the scrollbar, because if you want to have an immersive 3D thingy you probably don’t want the user to have to stare at the URL bar. But you also can’t hide it initially and you want to fill the whole screen. I think there’s no browser support for that use case. But it’s also about having more transparency about what browser elements are on the screen. Because on mobile there’s quite a few, on the bottom, on the top, maybe some overlays. There’s the safe areas now, and I think there’s
Made with FlippingBook - professional solution for displaying marketing and sales documents online