diff --git a/public/css/launcher.css b/public/css/launcher.css index d2864a7..1796fe2 100644 --- a/public/css/launcher.css +++ b/public/css/launcher.css @@ -99,8 +99,8 @@ body { padding: 0; background: #0a0603; overflow: hidden; - width: 100vw; - height: 100vh; + width: 100%; /* nicht 100vw – Firefox zieht Scrollbar ab */ + height: 100%; display: flex; align-items: center; justify-content: center; @@ -113,6 +113,7 @@ body { width: 2037px; height: 1018px; flex-shrink: 0; + transform-origin: center center; will-change: transform; } diff --git a/public/js/map-scale.js b/public/js/map-scale.js new file mode 100644 index 0000000..7a71c12 --- /dev/null +++ b/public/js/map-scale.js @@ -0,0 +1,33 @@ +/* ================================================ + map-scale.js – Skaliert die Worldmap auf den + Viewport (cross-browser: Chrome, Firefox, Safari) +================================================ */ + +(function () { + const MAP_W = 2037; + const MAP_H = 1018; + + function scaleMap() { + const map = document.querySelector(".worldmap"); + if (!map) return; + + // window.innerWidth/Height = Viewport ohne Scrollbars, konsistent in + // Chrome, Firefox und Safari + const scale = Math.min( + window.innerWidth / MAP_W, + window.innerHeight / MAP_H + ); + + map.style.transform = `scale(${scale})`; + } + + // Beim Laden + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", scaleMap); + } else { + scaleMap(); + } + + // Bei Größenänderung (z.B. Zoom-Level-Wechsel im Browser) + window.addEventListener("resize", scaleMap); +})(); diff --git a/views/launcher.ejs b/views/launcher.ejs index 870bb26..43cab35 100644 --- a/views/launcher.ejs +++ b/views/launcher.ejs @@ -96,6 +96,7 @@ +