App: try to fix the bottom gap on iOS standalone
All checks were successful
/ depoly (push) Successful in 1m22s
All checks were successful
/ depoly (push) Successful in 1m22s
This commit is contained in:
parent
b2b84a9e5b
commit
0e33be020d
1 changed files with 17 additions and 6 deletions
21
src/App.css
21
src/App.css
|
@ -7,14 +7,25 @@
|
||||||
--safe-area-inset-bottom: env(safe-area-inset-bottom);
|
--safe-area-inset-bottom: env(safe-area-inset-bottom);
|
||||||
--safe-area-inset-right: env(safe-area-inset-right);
|
--safe-area-inset-right: env(safe-area-inset-right);
|
||||||
background-color: var(--tutu-color-surface, transparent);
|
background-color: var(--tutu-color-surface, transparent);
|
||||||
overscroll-behavior-y: none; /* FIXME: Safari 15.4 does not support this, requires 16+ */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:root, body, #root {
|
/*
|
||||||
min-height: 100vh;
|
Fix the bottom gap on iOS standalone.
|
||||||
min-height: 100dvh;
|
https://stackoverflow.com/questions/66005655/pwa-ios-child-of-body-not-taking-100-height-gap-on-bottom
|
||||||
|
*/
|
||||||
|
@media screen and (display-mode: standalone) {
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
height: 100dvh;
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-emoji {
|
.custom-emoji {
|
||||||
|
|
Loading…
Reference in a new issue