christophe/chesscubing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajuste le calcul du viewport mobile

Browse Source
This commit is contained in:
Christophe JEANNEROT
2026-04-12 18:09:16 +02:00
parent dab6a517e3
commit e5d755980e
1 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app.js
View File

@@ -38,12 +38,16 @@ const MODES = {
}; };
syncViewportHeight(); syncViewportHeight();
window.addEventListener("load", syncViewportHeight);
window.addEventListener("resize", syncViewportHeight); window.addEventListener("resize", syncViewportHeight);
window.addEventListener("scroll", syncViewportHeight, { passive: true });
window.addEventListener("pageshow", syncViewportHeight); window.addEventListener("pageshow", syncViewportHeight);
window.addEventListener("orientationchange", syncViewportHeight); window.addEventListener("orientationchange", syncViewportHeight);
window.visualViewport?.addEventListener("resize", syncViewportHeight); window.visualViewport?.addEventListener("resize", syncViewportHeight);
window.visualViewport?.addEventListener("scroll", syncViewportHeight); window.visualViewport?.addEventListener("scroll", syncViewportHeight);
window.setTimeout(syncViewportHeight, 0); window.setTimeout(syncViewportHeight, 0);
window.setTimeout(syncViewportHeight, 150);
window.setTimeout(syncViewportHeight, 400);
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
window.requestAnimationFrame(syncViewportHeight); window.requestAnimationFrame(syncViewportHeight);
}); });
@@ -91,7 +95,14 @@ switch (PAGE) {
} }
function syncViewportHeight() { function syncViewportHeight() {
const viewportHeight = window.visualViewport?.height ?? window.innerHeight; const visibleHeight = window.visualViewport?.height ?? window.innerHeight;
const viewportTopOffset = window.visualViewport?.offsetTop ?? 0;
const viewportHeight = Math.max(
visibleHeight + viewportTopOffset,
window.innerHeight,
document.documentElement.clientHeight,
);
document.documentElement.style.setProperty("--app-viewport-height", `${Math.round(viewportHeight)}px`); document.documentElement.style.setProperty("--app-viewport-height", `${Math.round(viewportHeight)}px`);
} }