refactor(client): use dvh

6 files changed, 9 insertions, 28 deletions

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 737c044e61..f9e08d79b1 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -82,16 +82,6 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 		else location.reload();
 	});
 
-	//#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
-
 	// If mobile, insert the viewport meta tag
 	if (['smartphone', 'tablet'].includes(deviceKind)) {
 		const viewport = document.getElementsByName('viewport').item(0);
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 0c46e89412..20622b083a 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -168,8 +168,7 @@ function more(ev: MouseEvent) {
 		left: 0;
 		z-index: 1001;
 		width: $nav-icon-only-width;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: 100dvh;
 		box-sizing: border-box;
 		overflow: auto;
 		overflow-x: clip;
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index c42407f5b0..cf82142fe0 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -198,8 +198,7 @@ onMounted(() => {
 	$ui-font-size: 1em;
 	$widgets-hide-threshold: 1200px;
 
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
+	min-height: 100dvh;
 	box-sizing: border-box;
 
 	&.wallpaper {
@@ -301,8 +300,7 @@ onMounted(() => {
 		top: 0;
 		right: 0;
 		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: 100dvh;
 		padding: var(--margin);
 		box-sizing: border-box;
 		overflow: auto;
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 3c0c2a44b6..224ad7ee1a 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -255,8 +255,7 @@ async function deleteProfile() {
 	--deckDividerThickness: 5px;
 
 	display: flex;
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	height: calc(var(--vh, 1vh) * 100);
+	height: 100dvh;
 	box-sizing: border-box;
 	flex: 1;
 
@@ -424,8 +423,7 @@ async function deleteProfile() {
 		top: 0;
 		left: 0;
 		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: 100dvh;
 		width: 240px;
 		box-sizing: border-box;
 		contain: strict;
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 140c23a35c..7029f798f1 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -220,8 +220,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 	$ui-font-size: 1em; // TODO: どこかに集約したい
 	$widgets-hide-threshold: 1090px;
 
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
+	min-height: 100dvh;
 	box-sizing: border-box;
 	display: flex;
 
@@ -273,8 +272,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 		top: 0;
 		right: 0;
 		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: 100dvh;
 		padding: var(--margin);
 		box-sizing: border-box;
 		overflow: auto;
@@ -362,8 +360,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 		top: 0;
 		left: 0;
 		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: 100dvh;
 		width: 240px;
 		box-sizing: border-box;
 		contain: strict;
diff --git a/packages/client/src/ui/zen.vue b/packages/client/src/ui/zen.vue
index c915f82428..84c96a1dae 100644
--- a/packages/client/src/ui/zen.vue
+++ b/packages/client/src/ui/zen.vue
@@ -28,8 +28,7 @@ document.documentElement.style.overflowY = 'scroll';
 
 <style lang="scss" scoped>
 .mk-app {
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
+	min-height: 100dvh;
 	box-sizing: border-box;
 }
 </style>