hk-planner/frontend/src/hooks/useFrameViewport.ts
2026-07-21 09:05:30 +00:00

22 lines
697 B
TypeScript

import { useEffect } from 'react'
type ViewportMode = 'desktop' | 'responsive'
const DESKTOP = 'width=1280'
const RESPONSIVE = 'width=device-width, initial-scale=1.0'
function setMetaViewport(content: string) {
const meta = document.querySelector<HTMLMetaElement>('meta[name="viewport"]')
if (meta) meta.content = content
}
export function useFrameViewport(mode: ViewportMode) {
useEffect(() => {
setMetaViewport(mode === 'desktop' ? DESKTOP : RESPONSIVE)
window.parent.postMessage({ type: 'hnf:viewport', mode }, '*')
return () => {
setMetaViewport(RESPONSIVE)
window.parent.postMessage({ type: 'hnf:viewport', mode: 'responsive' }, '*')
}
}, [mode])
}