JavaScript でスマホとPCを判別して表示内容を分ける方法

JavaScript でスマホとPCを判別して表示内容を分ける方法を紹介します。
例えば、スマホやPCに合わせてコードを切り替えたい時に便利な方です。

iPhone の判別方法

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)の判別方法

スマートフォン(iPhone,iPad,iPod,Android)の判別方法を紹介します。
次のコードは、ページを閲覧している環境が 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を判別して表示する要素を振り分ける方法を紹介しました。