レスポンシブサイトでスマホの時だけリンクを有効にする

 

 Web技術

レスポンシブサイトで

電話番号を記載して
スマホで見た時はタップして電話できるようにリンクを設定したいけど

パソコンで見た時はリンクをしないようにしておきたい。

ということがよくあると思います。

そのような時はjQueryを使って、
スマホでアクセスした時だけ電話番号にリンクを設定できます。

電話番号がテキストの場合

jQuery

HTML

jQueryでユーザーエージェントを取得・判定して、
スマホからアクセスしている時のみ、
電話番号にリンクを設定します。

テキスト(電話番号)を取得してリンク先を設定します。

※テキストはハイフン有り無しどちらでもOKです。

電話番号が画像の場合

先述では画像には対応できません。
そこで、電話番号を画像にした時のために画像用を作成してみました。

altの内容を取得してリンク先を設定します。

※逆にこちらはテキストには設定できません。
※altには電話番号のみを入れてください(ハイフン有り無しどちらでもOKです)。

jQuery

HTML

 

スマホユーザーにとっては
お問い合わせなど
簡単に電話できるようにしておくと便利ですね。

========================

▼参考にさせていただきました。ありがとうございます。

https://www.tam-tam.co.jp/tipsnote/javascript/post3209.html

 この記事の投稿者

アバター画像

iziz

Webデザイナー&HTMLコーダーときどきイラストレーター。
  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

ページ最上部へ