diff --git a/src/client/app.vue b/src/client/app.vue index edf6a6237..519eff9ab 100644 --- a/src/client/app.vue +++ b/src/client/app.vue @@ -375,7 +375,8 @@ export default Vue.extend({ $left-widgets-hide-threshold: 1600px; $right-widgets-hide-threshold: 1090px; - min-height: 100vh; + // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ + min-height: calc(var(--vh, 1vh) * 100); box-sizing: border-box; padding-top: $header-height; @@ -544,7 +545,8 @@ export default Vue.extend({ > .content { > * { - min-height: calc(100vh - #{$header-height}); + // ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ + min-height: calc((var(--vh, 1vh) * 100) - #{$header-height}); box-sizing: border-box; padding: var(--margin); @@ -597,7 +599,8 @@ export default Vue.extend({ &.fixed { position: sticky; overflow: auto; - height: calc(100vh - #{$header-height}); + // ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ + height: calc((var(--vh, 1vh) * 100) - #{$header-height}); top: $header-height; } @@ -620,7 +623,8 @@ export default Vue.extend({ > .container { position: sticky; height: min-content; - min-height: calc(100vh - #{$header-height}); + // ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ + min-height: calc((var(--vh, 1vh) * 100) - #{$header-height}); padding: var(--margin) 0; box-sizing: border-box; diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue index e926b4447..558087f1d 100644 --- a/src/client/components/sidebar.vue +++ b/src/client/components/sidebar.vue @@ -353,7 +353,8 @@ export default Vue.extend({ left: 0; z-index: 1001; width: $nav-width; - height: 100vh; + // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ + height: calc(var(--vh, 1vh) * 100); box-sizing: border-box; overflow: auto; background: var(--navBg); diff --git a/src/client/deck.vue b/src/client/deck.vue index 669719ba8..0fe35d602 100644 --- a/src/client/deck.vue +++ b/src/client/deck.vue @@ -211,7 +211,8 @@ export default Vue.extend({ --margin: var(--marginHalf); display: flex; - height: 100vh; + // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ + height: calc(var(--vh, 1vh) * 100); box-sizing: border-box; flex: 1; padding: $deckMargin 0 $deckMargin $deckMargin; diff --git a/src/client/init.ts b/src/client/init.ts index 8a0826732..134285ca8 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -59,6 +59,16 @@ if (localStorage.getItem('theme') == null) { applyTheme(lightTheme); } +//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ +// TODO: いつの日にか消したい +const vh = window.innerHeight * 0.01; +document.documentElement.style.setProperty('--vh', `${vh}px`); +window.addEventListener('resize', () => { + const vh = window.innerHeight * 0.01; + document.documentElement.style.setProperty('--vh', `${vh}px`); +}); +//#endregion + //#region Detect the user language let lang = localStorage.getItem('lang');