Use svh for mobile Safari

kishikawakatsumi · kishikawakatsumi · commit c9fc43437558 · 2023-05-29T11:37:21.000+09:00
diff --git a/Public/css/common.css b/Public/css/common.css
@@ -1,5 +1,6 @@
 body {
   height: 100vh;
+  height: 100svh;
 }
 
 .swift-logo {
diff --git a/Public/js/app.js b/Public/js/app.js
@@ -19,7 +19,8 @@ export class App {
   get contentViewHeight() {
     const headerHeight = document.querySelector("header").clientHeight;
     const footerHeight = document.querySelector("footer").clientHeight;
-    return `calc(100vh - ${headerHeight}px - ${footerHeight}px)`;
+    const viewport = CSS.supports("height", "100svh") ? "100svh" : "100vh";
+    return `calc(${viewport} - ${headerHeight}px - ${footerHeight}px)`;
   }
 
   constructor() {

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,8 @@ export class App {`
`19`	`19`	`get contentViewHeight() {`
`20`	`20`	`const headerHeight = document.querySelector("header").clientHeight;`
`21`	`21`	`const footerHeight = document.querySelector("footer").clientHeight;`
`22`		- return `calc(100vh - ${headerHeight}px - ${footerHeight}px)`;
	`22`	`+ const viewport = CSS.supports("height", "100svh") ? "100svh" : "100vh";`
	`23`	+ return `calc(${viewport} - ${headerHeight}px - ${footerHeight}px)`;
`23`	`24`	`}`
`24`	`25`
`25`	`26`	`constructor() {`