手順
npmかyarnでreact-device-detectをインストール
shell
npm install react-device-detect実装する
Hoge.js
import { graphql, useStaticQuery } from "gatsby"
import React from 'react'
import { BrowserView, MobileView } from "react-device-detect"
const Hoge = () => {
return (
<div >
<BrowserView> <h1>ブラウザだけだよ！！！</h1> </BrowserView> <MobileView> <h2>スマホだけだよ！！</h2> </MobileView> </div>
)
}
3行めでインポートして、
PCブラウザのみで表示したいコンテンツは
<BrowserView>でくくる。
スマホブラウザのみで表示したいコンテンツは
<MoblieView>でくくる。
以上。
補足
iPad AirではChromeでもSafariでもモバイル扱いになる様子。
当方のiPad AirでのChromeでは、PC版をリクエストしても、モバイルのままの様子。
〆
簡単杉
こんなにお手軽に切り替え実装ができるだなんて夢にも思わんかったわ...ホント進歩してますな...