スマホ判定

利用場面

• AdSense 表示切り替え (スマホとPCで広告表示位置を変える)

ライブラリのインストール

bash

npm install react-responsive

コード

index.tsx など

tsx

import { useMediaQuery } from 'react-responsive';

export default function Xxxx(): ReactNode {
  ...
  const isMobile = useMediaQuery({ maxWidth: 767 }); // スマホ判定

React コンポーネント内で使うこと。(Hookなので)

判定基準

• maxWidth: 767 はスマホ（iPhone SE〜14 Pro）に相当
• タブレット（768〜1024）やPCとの分岐も必要なら たとえば下記のように追加可能

tsx

const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1024 });
const isDesktop = useMediaQuery({ minWidth: 1025 });