iosのsafariで電話番号がリンクになってしまうのを1行で無効化
どうも7noteです。safariの自動電話リンクを無効化させる方法
iosのsafariには自動的に電話番号をaタグのリンクに変更して表示する機能がありますが、優秀過ぎて逆に電話番号でないものまでリンクにさせてしまったり、リンクが不必要なところでもリンクを設置してデザインを損なってしまうようなことがあります。
最悪の場合、要素はあるのになぜか文字だけが消えてしまってタップしたら電話かけられるけど見えない、なんてことになる場合もあるようです。
対策方法
たった一行、<head>要素の中に以下を追加するだけ！
<head>
<!-- 以下の1行を追加 -->
<meta name="format-detection" content="telephone=no">
</head>
チョー簡単！
逆に電話をかけたいものには「tel:」
<a href="tel:09012345678">電話をかける</a>
ちゃんと指定しているものは無効にならないので安心。
まとめ
チェックは全デバイス・全ブラウザでやるべきですね。予期せぬ不具合やレイアウト崩れに繋がるので。チェックの時間は入念にとっておきましょう。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ
Author And Source
この問題について(iosのsafariで電話番号がリンクになってしまうのを1行で無効化), 我々は、より多くの情報をここで見つけました https://qiita.com/7note/items/0b10db27095d5233c2ae著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .