JavaScript スマートフォンとPCを判別して固有の要素を出力する方法を紹介

Last update 
/ Posted by Takumi Hirashima

JavaScript でスマートフォンとPCを判別して、スマートフォンなら固有の要素を出力する方法を紹介します。
ユーザーエージェントの判別には navigator.userAgent を利用します。

iPhone の判別方法

まずは iPhone の判別方法です。navigator.userAgent に iPhone を指定します。
ページを表示している環境が iPhone なら「iPhone だよ」が表示されます。

<script type="text/javascript">
  // iPhone iPad iPod Android の判別
  if (
    navigator.userAgent.indexOf('iPhone') > 0 ) 
  {
    document.getElementById(“innerhtml”).innerHTML = 'iPhone だよ';
  } else {
    document.getElementById(“innerhtml”).innerHTML = 'iPhone ではありません';
  }
</script>

スマートフォン(iPhone,iPad,iPod,Android)全般の判別方法

そしてスマートフォン全般の判別方法です。

<script type="text/javascript">
  // iPhone iPad iPod Android の判別
  if (
    navigator.userAgent.indexOf('iPhone') > 0 || 
    navigator.userAgent.indexOf('iPad') > 0 || 
    navigator.userAgent.indexOf('iPod') > 0 || 
    navigator.userAgent.indexOf('Android') > 0 ) 
  {
    document.getElementById(“innerhtml”).innerHTML = '<link rel="stylesheet" type="text/css" href="sp.css">';
  } else {
    document.getElementById(“innerhtml”).innerHTML = '<link rel="stylesheet" type="text/css" href=“pc.css">';
  }
</script>

まとめ

JavaScript でスマートフォンとPCを判別して、スマートフォンなら固有の要素を出力する方法を紹介しました。

スポンサーリンク