From 501f1d2af6169b125ba5676a33d1645071d38f28 Mon Sep 17 00:00:00 2001
From: Raclamusi <raclamusi@gmail.com>
Date: Sun, 5 Jul 2026 18:48:40 +0900
Subject: [PATCH] =?UTF-8?q?CSS=20=E3=81=AE=E9=95=B7=E3=81=95=E3=81=AE?=
 =?UTF-8?q?=E5=8D=98=E4=BD=8D=20vw,=20vh=20=E3=82=92=20dvw,=20dvh=20?=
 =?UTF-8?q?=E3=81=AB=E7=BD=AE=E6=8F=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

vw, vh はスマホにおいてアドレスバーなどのブラウザの UI を含むビューポート全体の長さを基準とするため、コンテンツが実際に表示される領域よりも大きくなり、画面からはみ出して見えなくなることがあります。
dvw, dvh はブラウザの UI を除いた領域を基準にするため、 vw, vh の代わりに使用することでスマホでもコンテンツがはみ出さなくなります。
---
 css/kunai/site/goog.css    |  2 +-
 css/kunai/site/layout.css  | 12 ++++++------
 css/kunai/site/sidebar.css |  2 +-
 css/kunai/variables.css    |  4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/css/kunai/site/goog.css b/css/kunai/site/goog.css
index ad2bf72..9e828f7 100644
--- a/css/kunai/site/goog.css
+++ b/css/kunai/site/goog.css
@@ -15,7 +15,7 @@ main div[itemtype="http://schema.org/Article"] {
 
     box-sizing: border-box;
 
-    max-height: 60vh;
+    max-height: 60dvh;
     overflow-x: auto;
     overflow-y: scroll;
 
diff --git a/css/kunai/site/layout.css b/css/kunai/site/layout.css
index 39b2de0..aaa58b3 100644
--- a/css/kunai/site/layout.css
+++ b/css/kunai/site/layout.css
@@ -41,7 +41,7 @@ body {
 nav[role="navigation"] {
   display: flex;
   // min-height: 3rem;
-  // max-height: 8vh;
+  // max-height: 8dvh;
 
   padding: 0 .8rem;
   box-sizing: border-box;
@@ -69,7 +69,7 @@ nav[role="navigation"] {
 
   z-index: $navbar-expand-z;
 
-  width: 100vw;
+  width: 100dvw;
   min-height: 4rem;
 
   background: #EFEFEF;
@@ -275,20 +275,20 @@ main {
         .crsearch {
           flex-basis: auto;
           min-width: 92%;
-          max-width: 94vw;
+          max-width: 94dvw;
           margin: .5rem 0 0 0;
         }
       }
     }
 
     div[itemtype="http://schema.org/Article"] + div {
-      // flex-basis: 100vw;
+      // flex-basis: 100dvw;
       flex-basis: unset;
 
       border: none;
 
       /* box-shadow: 0px 9px 16px 2px rgba(0, 0, 0, 0.8); GPUメモリ削減のため無効化 */
-      padding: 0 4vw;
+      padding: 0 4dvw;
     }
   }
 }
@@ -316,7 +316,7 @@ main {
 
   main {
     div[itemtype="http://schema.org/Article"] + div {
-      padding: 0 2vw;
+      padding: 0 2dvw;
     }
   }
 }
diff --git a/css/kunai/site/sidebar.css b/css/kunai/site/sidebar.css
index e6f0b15..00c93ed 100644
--- a/css/kunai/site/sidebar.css
+++ b/css/kunai/site/sidebar.css
@@ -774,7 +774,7 @@ main[role="main"] .kunai-sidebar.force-legacy {
       &[data-branch-for="headers"] {
         order: 3;
         margin-bottom: 2em;
-        max-height: 70vh;
+        max-height: 70dvh;
       }
       &[data-branch-for="articles"] {
         order: 4;
diff --git a/css/kunai/variables.css b/css/kunai/variables.css
index 64800ba..4b72711 100644
--- a/css/kunai/variables.css
+++ b/css/kunai/variables.css
@@ -1,5 +1,5 @@
-$navbar-height: 5vh;
-$main-height: calc(100vh - $navbar-height);
+$navbar-height: 5dvh;
+$main-height: calc(100dvh - $navbar-height);
 
 $nav-bg: #f8f8f8;