OTHER

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

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

iPhone の判別方法

まずは iPhone の判別方法です。navigator.userAgentiPhone を指定します。
ページを表示している環境が 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を判別して、スマートフォンなら固有の要素を表示する方法を紹介しました。

スポンサーリンク

合わせて読みたい関連記事