Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Use dvh/dvw instead of vh/vw for mobile #1016

Merged
merged 1 commit into from
Apr 22, 2024
Merged

Conversation

bdow
Copy link
Contributor

@bdow bdow commented Apr 22, 2024

Use height: 100dvh (dynamic viewport height) vs 100vh as it takes into account the address bar and other "chrome" added around the viewport. This results in a better output for the screen.

dvh and dvw has been supported in iOS, and most browsers since early-mid 2022. More specifically as of iOS/Safari v15.4, Chrome v108, Firefox v101. See MDN docs for a more complete browser support.

100vh 100dvh
Simulator Screenshot - iPhone 15 - 2024-04-22 at 10 06 25 Simulator Screenshot - iPhone 15 - 2024-04-22 at 10 07 16

@bdow bdow enabled auto-merge (squash) April 22, 2024 14:14
@bdow bdow merged commit cbb86ad into main Apr 22, 2024
5 of 6 checks passed
@bdow bdow deleted the modal-responsive-dvh branch April 22, 2024 14:15
homebound-team-bot pushed a commit that referenced this pull request Apr 22, 2024
## [2.343.1](v2.343.0...v2.343.1) (2024-04-22)

### Bug Fixes

* Use dvh/dvw instead of vh/vw for mobile ([#1016](#1016)) ([cbb86ad](cbb86ad))
@homebound-team-bot
Copy link

🎉 This PR is included in version 2.343.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants