スマホで見た時だけフォントが大きくなってしまったら・・・

最近、エアコンを買ったjyunzyです。
これでうちのエアコンは3台になったのですが、一度に使った時にブレーカーが落ちないかと別の意味でヒヤヒヤしています。

今回は「スマホで見た時だけフォントが大きくなってしまった場合の対策」について書いてみたいと思います。

スマホが普及する前に作成されたようなサイトだと、部分的にフォントが大きくなってる事が多いですよね。
どうやらiPhoneやAndroidなどでは、文字が見やすいように文字サイズを自動調整して、大きく表示してしまうようです。

ただ、フォントが大きくなった影響でレイアウトが崩れてしまうケースもあります。
そんな時には、以下の記述で自動調整を切る事ができます。

body {
  -webkit-text-size-adjust: 100%;
}

bodyタグに指定をしていますが、自動調整したほうが見やすい場合もありますよね。
その時は該当するタグに対して自動調整をしてあげてください。
上記の記述の場合だと、「100%」の所をautoにすれば、自動調整になります。

トラックバックURL