どうも7noteです。safariの自動電話リンクを無効化させる方法
iosのsafariには自動的に電話番号をaタグのリンクに変更して表示する機能がありますが、優秀過ぎて逆に電話番号でないものまでリンクにさせてしまったり、リンクが不必要なところでもリンクを設置してデザインを損なってしまうようなことがあります。
最悪の場合、要素はあるのになぜか文字だけが消えてしまってタップしたら電話かけられるけど見えない、なんてことになる場合もあるようです。
対策方法
たった一行、<head>要素の中に以下を追加するだけ！
<head>
<!-- 以下の1行を追加 -->
<meta name="format-detection" content="telephone=no">
</head>
チョー簡単！
逆に電話をかけたいものには「tel:」
<a href="tel:09012345678">電話をかける</a>
ちゃんと指定しているものは無効にならないので安心。
まとめ
チェックは全デバイス・全ブラウザでやるべきですね。予期せぬ不具合やレイアウト崩れに繋がるので。チェックの時間は入念にとっておきましょう。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ