・スマホやタブレット時だけリンク先を変えたいけどどうやるの？
こんな疑問にお答えします。
サイトによっては、スマホやタブレットで閲覧してる時だけ、リンク先を変えたい場合がありますよね。
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】：まとめ
- ユーザーエージェントを取得
- ユーザーエージェントの文字列を使いデバイスと一致するか判定
- 「もし〇〇のデバイスだったら～△△の要素のhref属性を◇◇にする」という記述をする
デバイス判定での実装はたまに使うので覚えておこう！
