ホームページ制作時、スマフォ(スマホ)で数値が表示されない!?コーディングミス or CSSのミス それとも仕様!?

ホームページ制作時、スマフォ(スマホ)でブラウザチェックをしていたところ、数値が表示されていない症状が出た。

その場所をタップすると、文字は見えないがリンクが生きていて、電話をかけれるようになっている。

スマフォの各種ブラウザには、数値の羅列を自動的にリンク化する機能が仕様として備わっている。そのため、自動的にaタグが挿入されていることになる。aタグに、スタイルでcolor:#ffffffなどを指定して、さらにbackground-colorが#ffffffなどであった場合は、完全に同化し非表示になったように見える。

そのため、自動リンクを無効化し、リンクカラーが自動的に反映されない仕組みを設ける必要がある。

■対応方法

以下metaタグをhead内に挿入し、自動リンクを無効化します。

[crayon-5b7acfe409ce5032409578/]