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

Meta tag property "viewport-fit=cover" is crucial for iOS #23

Closed
LineWolff opened this issue Jul 6, 2024 · 1 comment · Fixed by #26
Closed

Meta tag property "viewport-fit=cover" is crucial for iOS #23

LineWolff opened this issue Jul 6, 2024 · 1 comment · Fixed by #26

Comments

@LineWolff
Copy link

Just waisted way too much time debugging why safe areas on iOS was 0px. Turned out the viewport meta tag was missing the "viewport-fit=cover" property, which is mandatory for safe areas to work on iOS.

It was confusing, since the app actually rendered perfectly edge-to-edge without "viewport-fit=cover", so I didn't suspect anything wrong with the viewport.

Not every project is initialized by default with "viewport-fit=cover" set in the meta tag, so it would be nice if it were added to the docs as a requirement for iOS to work.

#22 was probably due to the same thing (their Nuxt setting overriding the original meta tag, which probably had "viewport-fit=cover" set).

@tafelnl
Copy link
Member

tafelnl commented Jul 26, 2024

Yes, for web and iOS to be able to make use of the env variables, you should add "viewport-fit=cover" as the meta tag value. To be clear: that's always true, and not only when using this plugin. I added it to the docs

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