Skip to content

Commit 97e4322

Browse files
aitjcizeaitjcize
committed
apps/dashboard: improve mobile view
1 parent 8f6886c commit 97e4322

File tree

2 files changed

+59
-1
lines changed

2 files changed

+59
-1
lines changed

‎apps/dashboard/index.html

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,30 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
66
<title>Overlord Dashboard</title>
77
<link rel="icon" href="/favicon.ico">
8+
<link rel="manifest" href="/manifest.json">
9+
<meta name="theme-color" content="#0f172a">
10+
11+
<!-- iOS Add to Home Screen meta tags -->
12+
<meta name="apple-mobile-web-app-capable" content="yes">
13+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
14+
<meta name="apple-mobile-web-app-title" content="Overlord">
15+
16+
<!-- iOS icons -->
17+
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
18+
19+
<!-- iOS splash screens - you would need to create these images -->
20+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-2048-2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
21+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-1668-2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
22+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-1536-2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
23+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-1125-2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
24+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-1242-2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
25+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-828-1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
26+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-1242-2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
27+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-750-1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
28+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-640-1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
829
</head>
930
<body>
1031
<div id="app"></div>

‎apps/dashboard/src/main.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,45 @@ import { createApp } from "vue";
22
import { createPinia } from "pinia";
33
import App from "./App.vue";
44
import "./assets/tailwind.css";
5+
import "./assets/mobile-viewport-fix.css"; // Import mobile viewport fix
56
import "./services/axios"; // Import axios configuration
67

8+
// Fix for mobile Safari viewport height
9+
const setVhVariable = () => {
10+
// First we get the viewport height and multiply it by 1% to get a value for a vh unit
11+
const vh = window.innerHeight * 0.01;
12+
// Then we set the value in the --vh custom property to the root of the document
13+
document.documentElement.style.setProperty("--vh", `${vh}px`);
14+
15+
// Add a small delay for iOS "Add to Home Screen" mode to ensure correct height
16+
if (navigator.standalone) {
17+
setTimeout(() => {
18+
const vh = window.innerHeight * 0.01;
19+
document.documentElement.style.setProperty("--vh", `${vh}px`);
20+
}, 100);
21+
}
22+
};
23+
24+
// Set the height variable on initial load
25+
setVhVariable();
26+
27+
// Update the height variable on resize and orientation change
28+
window.addEventListener("resize", setVhVariable);
29+
window.addEventListener("orientationchange", () => {
30+
// Add a small delay after orientation change to get the correct height
31+
setTimeout(setVhVariable, 100);
32+
});
33+
34+
// Additional event for iOS "Add to Home Screen" mode
35+
if ("standalone" in navigator && navigator.standalone) {
36+
// iOS web app is running in "Add to Home Screen" mode
37+
document.addEventListener("visibilitychange", () => {
38+
if (document.visibilityState === "visible") {
39+
setVhVariable();
40+
}
41+
});
42+
}
43+
744
// Create the app instance
845
const app = createApp(App);
946

0 commit comments

Comments
 (0)