webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

スマートフォンサイトでの電話番号とメールアドレスの扱い

スマートフォンの機種によっては数字が3桁以上並んでいると勝手に電話番号と認識してしまい、タッチすると電話番号が掛かってしまう場合があります。
ただ、この機能自体はスマートフォンの持っているメリットでもあるので、
リセットのようにまず最初に数字を電話番号と認識してしまう機能をOFFにして、実際の電話番号にのみONの設定をします。
これは同様にemailアドレスにも言える事なので、同様の処理をしましょう。

まずはmetaの設定で、電話番号とメールアドレスの機能をOFFにします。

<meta charset="utf-8">
<title>スマートフォンサイト</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no">


その後、電話番号のリンクに

<a href="tel:0312345678">電話はこちらへ</a>


メールアドレスのリンクに

<a href="mailto:info@example.com">メールはこちらへ</a>


ただ、このままではPCでクリックした際に 「プロトコルが不明」「開けません」というメッセージが返ってきてしまいます。 telリンクを設定しなければ問題ないのですが、そうすると、スマホで見たときに、 電話番号をタップして電話をかけることができません。 電話をかける機能があるのに直接電話できないのは、ちょっと不親切です。
こういう時は、JS・jQueryを使って、スマホの時だけ電話番号にtelリンクを 設定します。


qiita.com


もしくは「display:none」で電話番号ごと消してしまいましょう。