どもです。
日差しは暖かいのに風が冷たくて困る餅。です。

基本的に引き篭もりなので、こんな季節なのに暖かさが恋しい。

 

さて、今回はコーディングについての話題です。

今日は一日、ちまちまとした修正や原稿流しをしていたのですが、ちょっと困った事態が。

PCだと何も問題がなかった電話番号を記載した部分が、
iPadだと思い切りレイアウト崩れしていました。

何が困るって、iPadだとコンソールが出ないから困ります。原因究明の手段がありません。

ので、仕方ないと割り切り、その部分は作り直すことにしました。
すると、先ほどよりはマシになったものの、やはりレイアウトが崩れています。

明らかに崩れ方がおかしいと思い調べてみると、やはりiPad…というか、
スマホ特有の要素が原因でした。

 

というのも、モバイル用Safariでは、
「電話番号っぽい数字の羅列」を、勝手にリンク化してしまうのだとか。

つまり、PCではaタグのついていなかったところに、
iPadなどではaタグが挿入されている、ということ。これが原因で間違いなさそうです。

この問題の解決法は2つ。

1つは、CSSの指定法を変更し、aタグ単体にレイアウトを崩しかねないCSSを
飛ばないようにすること。

もう1つは、勝手にaタグが挿入されるのを防ぐことです。
こちらの場合、head内に、
<meta name="format-detection" content="telephone=no"/>
と記載することでリンク化を防げるようです。