【jQuery】スマホやタブレットを判定してリンク先変更【コピペOK】

パソ君

・スマホやタブレット時だけリンク先を変えたいけどどうやるの？

こんな疑問にお答えします。

サイトによっては、スマホやタブレットで閲覧してる時だけ、リンク先を変えたい場合がありますよね。

jQueryを利用すれば簡単に実装できちゃいます。

ジト

すぐにできるよ！

ということで、この記事では「スマホやタブレットを判定してリンク先変更」について解説していきます！

【jQuery】スマホやタブレットを判定してリンク先変更【コピペOK】

そんなサンプルがこちら↓

See the Pen 横幅によってリンク先を変える by jito-coder (@jito-coder) on CodePen.

PC時だとこのサイトのTOPページへ。

スマホやタブレットだと、僕のTwitterアカウントに飛ぶかと思います。

コードがこちら↓

<div class="test__box">
    <a href="https://jito-site.com/" target="_blank" class="test__link">
        スマホやタブレットだとTwitterのリンク。PCだとTOPページに飛ぶよ。
    </a>
</div>

$(window).on('load', function() {
    if  (navigator.userAgent.match(/iPhone|iPad|Android.+Mobile/)) {
        $('.test__link').attr('href','https://twitter.com/jito_coder')
    }
});

解説する重要なコードとしてはこちら↓

順に見ていきましょう。

➀：ユーザーエージェントを取得

まず閲覧しているデバイスが何なのかを判定します。

そこでデバイスによって異なる「ユーザーエージェント」というデータを取得していきましょう。

下記のコード部分によって、ユーザーエージェントを取得できます。

navigator.userAgent

➁：ユーザーエージェントの文字列と一致するか判定

次に先ほど取得したユーザーエージェントと、デバイスそれぞれのユーザーエージェントが一致するかを判定します。

下記コード部分のmatchメソッドを使えば、ユーザーエージェントの文字列から正規表現を検索して、一致するかの確認が可能です。

match(/iPhone|iPad|Android.+Mobile/)

ここでは「iPhone、iPad、Android」のどれかと一致するかを判定しています。

➂：そのユーザーエージェントに対して指定要素のリンクを変える

最後にif文を使い、指定のユーザーエージェントとマッチした場合、リンク先を変える指定をします。

$('.test__link').attr('href','https://twitter.com/jito_coder')

.test__linkというクラスのhref属性を、https~にするという意味。

つまりこういうこと

$(window).on('load', function() {
    if  (navigator.userAgent.match(/iPhone|iPad|Android.+Mobile/)) {
        $('.test__link').attr('href','https://twitter.com/jito_coder')
    }
});

上記コードを説明すると

もし取得したユーザーエージェントの文字列が、
「iPhone、iPad、Android」のどれかと一致したら、
.test__linkクラスのhref属性の値を
「https://twitter.com/jito_coder」に変更する

という意味。

このやり方を使えば、デバイスによってリンク先を変えることが可能に。リンク先だけでなく、クラスをつけたりcssを変更したり、テキストを変えたりも可能ですね！

【jQuery】スマホやタブレットを判定してリンク先変更【iPad判定の注意点】

実は先述した方法だと、iOS 13以降のiPadでは判定されません。

というのもiOS 13以降だと「デスクトップ用Webサイトを表示」の機能が追加され、オンになっている場合、ユーザーエージェントにiPadの文字がなくなるため。

そのため違うコードを記述する方法があります。

それが下記コードですね↓

$(window).on('load', function() {
    if  (navigator.userAgent.match(/iPhone|iPad|Android.+Mobile|Macintosh/) && 'ontouchend' in document) {
        $('.test__link').attr('href','https://twitter.com/jito_coder')
    }
});

「|Macintosh/) && ‘ontouchend’ in document」を追加すれば、iOS 13以降のiPadでも判定分岐してリンク先を変更することができます。

サンプルがこちら↓

See the Pen スマホやタブレットを判定してリンク先変更 by jito-coder (@jito-coder) on CodePen.

iOS 13以降のiPadでもリンク先が変わっているかと思います。

【jQuery】スマホやタブレットを判定してリンク先変更【コピペOK】：まとめ

ジト

デバイス判定での実装はたまに使うので覚えておこう！