JavaScript

SPのみ電話リンクを有効にする方法

電話のリンクはPCでは必要なので無効にしたい・・・ってことがありますよね。
今回は、ユーザーエージェントで切り替える方法とCSSで切り替える方法を紹介します。

SPのみ電話リンクを有効にする方法

ユーザーエージェントで電話リンクを切り替える

Javascriptを使用してユーザーエージェントを取り、AndroidかiPhoneでアクセスされた時のみ電話リンクを有効にします。

Android、iPhone以外の端末でアクセスした場合は、リンクを無効にしてくれます。

CSSで電話リンクを切り替える

こちらの方法では、横幅によってリンクを切り替えるだけなので完全にリンクを無効にすることはできません。
端末によって切り替えたい場合は上記のユーザーエージェントを使用する方法を使用してください。

これで、横幅が640pxを超えた時に電話リンクを無効にすることができます。
メディアクエリの値を変えることでタイミングは調節可能です。

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

イラスト制作、webサイト制作、商品のご紹介など様々なお仕事を募集しております! 下記リンクよりお気軽にご連絡ください!

お仕事・ご依頼について

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)