Published on

javascriptでモバイル端末かどうかを判定する簡単な方法

Authors
  • avatar
    Name
    ssu
    Twitter

cssのメディアクエリ（media query）のようにjavascriptでモバイル・スマートフォンかを判別して、 何らかの処理をしたい場合の簡単な方法を紹介します。

実はIE10からサポートされていて、media queryを使って判別する方法があります。 例えば、mobileデバイスかどうかを判別する場合は、下記のようなコードで判別ができます。

const isMobile = () => window.matchMedia('(max-width: 800px)').matches
if (isMobile()) {
 console.log('スマートフォン・モバイル・タブレット')
} else {
 console.log('PC')
}

このようにwindow.matchMediaにmax-widthでデバイスの最大値を指定してあげれば、 cssで使っているように画面の大きさに応じて何らかの処理を記述することが可能になります。

ちなみにIE9以下では、window.innerWidthとwindow.innerHeightを使ってあげればよいです。

function isMobile() {
    return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
}
if (isMobile()) {
 console.log('スマートフォン・モバイル・タブレット')
} else {
 console.log('PC')
}

また、その他にもuserAgentに応じてデバイスを判断する方法もありますが、 下記にもあるようにまだuserAgentをサポートしていないブラウザはたくさんあるので、避けたほうが良いです。 https://caniuse.com/mdn-api_navigator_useragentdata

参考: Window.matchMedia()

参考: Detecting a mobile browser

Discuss on Twitter • View on GitHub