画面幅375pxを下回る環境で観覧した際はviewportをwidth=375に書き換えるスクリプトをカスタムフックにする 📱

かつて制作した、画面幅375pxを下回る環境で観覧した際はviewportをwidth=375に書き換えるスクリプトですが、React用にカスタムフックにしました。

blog.kimizuka.org

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>
  );
}