かつて制作した、 画面幅375pxを下回る環境で観覧した際はviewportをwidth=375に書き換えるスクリプト ですが、React用にカスタムフックにしました。
useResizeに関しても、かつて作成した useResize を流用しています。
ソースコード
useViewport.tsx
import { useEffect, useState } from 'react'; import { useResize } from './useResize'; export function useViewport(standardWidth:number = 375) { const { windowWidth } = useResize(); const [ viewport, setViewport ] = useState('width=device-width'); useEffect(() => { if (screen.width < standardWidth) { setViewport(`width=${ standardWidth }`); } else { setViewport('width=device-width'); } }, [windowWidth]); return { viewport }; }
useResize.tsx
import { useEffect, useState } from 'react'; export function useResize() { const [ windowWidth, setWindowWidth ] = useState(0); const [ windowHeight, setWindowHeight ] = useState(0); useEffect(() => { window.removeEventListener('resize', handleResize); window.addEventListener('resize', handleResize, { passive: true }); handleResize(); return () => { window.removeEventListener('resize', handleResize); } }, []); function handleResize() { setWindowWidth(window.innerWidth); setWindowHeight(window.innerHeight); } return { windowWidth, windowHeight }; }
つかいかた
index.tsx(抜粋)
import Head from 'next/head'; import { useViewport } from '@/hooks/useViewport'; export default function IndexPage() { const { viewport } = useViewport(375); return ( <Wrapper> <Head> <meta name="viewport" content={ viewport } /> </Head> </Wrapper> ); }
取得したviewportをHead内のmetaに入れて使います。