You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
1.0 KiB
29 lines
1.0 KiB
/** Sync `--vh` to the visible viewport (px). Used for mobile min-height and legacy call sites. */ |
|
export function syncViewportHeightCssVar(): void { |
|
const h = window.visualViewport?.height ?? window.innerHeight |
|
document.documentElement.style.setProperty('--vh', `${h}px`) |
|
} |
|
|
|
/** Keep `--vh` aligned when the window, visual viewport, or root layout (e.g. font scaling) changes. */ |
|
export function installViewportHeightListeners(): () => void { |
|
const sync = () => syncViewportHeightCssVar() |
|
|
|
window.addEventListener('resize', sync) |
|
window.addEventListener('orientationchange', sync) |
|
window.visualViewport?.addEventListener('resize', sync) |
|
|
|
let ro: ResizeObserver | undefined |
|
if (typeof ResizeObserver !== 'undefined') { |
|
ro = new ResizeObserver(sync) |
|
ro.observe(document.documentElement) |
|
} |
|
|
|
sync() |
|
|
|
return () => { |
|
window.removeEventListener('resize', sync) |
|
window.removeEventListener('orientationchange', sync) |
|
window.visualViewport?.removeEventListener('resize', sync) |
|
ro?.disconnect() |
|
} |
|
}
|
|
|