style: mapを各デバイスで見やすくできるように

nitfc-festival-system-team · Oct 25, 2023 · 8cc408d · 8cc408d
1 parent 138e9bc
commit 8cc408d
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 8 deletions.
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
@@ -5,7 +5,7 @@ import { useCheckIsMobile } from "@/features/checkIsMobile";
 import { VenueMap } from "./VenueImageMap";
 
 export const Map = () => {
-  const [isMobile, device] = useCheckIsMobile();
+  const [isMobile, _] = useCheckIsMobile();
   return (
     <>
       <h1 style={{ marginTop: "1rem" }}>{"会場図案内"}</h1>
@@ -15,7 +15,6 @@ export const Map = () => {
         各露店の詳細に飛びます
       </p>
       <br />
-      <p>{device}</p>
       <div
         style={{
           display: "flex",

diff --git a/src/components/VenueImageMap.tsx b/src/components/VenueImageMap.tsx
@@ -13,8 +13,8 @@ export const VenueMap = () => {
         style={{
           translate: isMobile
             ? device === "iPad"
-              ? "50vw 5vh"
-              : "25vh 15vh"
+              ? "40vw 15vh"
+              : "58vh 30vh"
             : "8vw 30vh",
           scale: isMobile ? "0.9" : "1",
         }}

diff --git a/src/features/checkIsMobile.ts b/src/features/checkIsMobile.ts
@@ -17,16 +17,16 @@ export function useCheckIsMobile(): [boolean | null, string] {
     // isMobile ステートを更新
     setIsMobile(mobile);
 
-    if (device.includes("Android")) {
+    if (userAgent.includes("Android")) {
       setDevice("Android");
-    } else if (device.includes("iPhone")) {
+    } else if (userAgent.includes("iPhone")) {
       setDevice("iPhone");
-    } else if (device.includes("iPad")) {
+    } else if (userAgent.includes("iPad")) {
       setDevice("iPad");
     } else {
       setDevice("PC");
     }
-  }, [device]);
+  }, []);
 
   return [isMobile, device];
 }