スマートフォンの時だけ電話番号のリンクを有効にする

スマートフォンやタブレットでウェブサイトを見ている時にボタンをタップすると通話発信ができるようにするためには電話番号用のtelリンクを設定する必要がありますが、一部のスマートフォンではtelリンクを設定していない、電話番号で無いただの文字列もリンク扱いになってしまいます。

なので、まずmetaタグで

<meta name="format-detection" content="telephone=no">

と記述し、

実際の電話番号へのリンク部分に

<a href=”tel:0312345678”>お電話はこちら</a>

というリンク設定をします。

ただこのリンクはスマートフォンの時のみに有効にしたいため、PC時などは無効にする必要があります。以前はjQueryを使って行なっていましたが、最近はcssの「pointer-events」を使って、cssのみで行う事が出来ます。

pointer-eventsはマウスイベント（hover , click など）の発生を制御します。
HTMLの要素に適用できる設定値は、auto , none のみです。それ以外はsvgの要素に適用できます。

今回はこの「pointer-events」を使ってPCの時はnoneに、spの時はautoに設定します。

/*pcの時*/
a[href^="tel:"] {
    pointer-events:none;
}
@media screen and (max-width:767px){}
/*spの時*/
a[href^="tel:"] {
    pointer-events:auto;
}
}

これで、指定した"値"が属性の値と前方一致する要素を選択する、というものらしいです。
つまり、$([href^="#"])とすることで、href属性が "#" で始まる要素を取得することができます。
元々はjQueryで使っていた演算子ですが、最近はcssでも使用する事が出来ます。

WEBサイト制作の勉強