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です。
コメント