UserAgentでスマホからのアクセスを判断

ショートカット

UserAgentを使ったアクセス元の判断
1. 画面幅で表示を変えたい場合

UserAgentを使ったアクセス元の判断

スマホからアクセスされた場合に、動的に画面表示を切り替えたい場合があります。

アクセス元のデバイスを判断するにはUserAgentを使います。デバイスを判断するコード例は下のような感じです。

//UserAgentを取得
  let getDevice = (function(){
    let ua = navigator.userAgent
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
      //スマホ
      return 'sp'
    }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
      //タブレット
      return 'tab'
    }else{
      //その他PCなど
      return 'other'
    }
  })()

getDeviceは即時関数なので、getDeviceと書けば ‘sp’ などそのまま文字列になります。

ReduxではcomponentDidMount()などで上記を呼び出し、storeに保存しておけば便利です。どの画面からでもデバイスで判断して制御を行うことができます。

画面幅で表示を変えたい場合

デバイスではなく、単純に画面幅で表示を変えたい場合にはdocumentオブジェクトのclientWidthで判断できます。

たとえば下のように、画面幅が1024px以下かどうかをstateまたはstoreに持っておくようにすれば良いかと思います。

this.state = {
  isIpad: document.documentElement.clientWidth <= 1024
}

もちろんそのままdocument.documentElement.clientWidthを呼び出して都度判断してもOKです。