ど素人から毛を生やす。<延>

iPadとかで数字だけがずれた時

Web > Other 2014年5月21日(最終更新:3年前)

このページは2014.5.21に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)