スマホを横にした時にサイズが拡大するときの対処法

HPをデザインしてレイアウトを確認していると、パソコンではちゃんと表示されるのに、スマホを横にした時にサイズが拡大してしまい、レイアウトがずれて困ってしまうことありませんか？

自分の場合は文字サイズが拡大されて、設定していたチェックボックスが変なとこに移動してしまったのですが、スマホを横にした時だけ発生してしまったので、困ってました。

このサイズが拡大される現象を解決します。

iphoneなどのスマホでは、横にした時に勝手に文字サイズが拡大される機能があるようです。イメージ的には下図のようにデザインがずれます。

コアラ

結構ずれるんだな・・

ちょっと大げさなイメージ画像ですがこんな感じです。スマホを横にした時だけ、なぜか文字サイズが拡大されて、デザインがずれてしまいます。

おそらく文字を読みやすくするために拡大してくれているのでしょうが、デザインがずれてしまっては迷惑な話です。この現象を解決するには、CSSを追記して、iphoneなどのスマホを横にしてもサイズが変更されないように設定する必要があります。

ものすごく簡単なので、レイアウトがずれてしまって困っている人はCSSを追記してしまいましょう。

1.追記するCSS

追記するのは下記のCSSです。

-webkit-text-size-adjust:100%

「-webkit-text-size-adjust」を指定しない場合は、端末を横にすると文字が拡大表示されてしまいます。正直デザインがずれる恐れがあるならば、文字なんて拡大しなくてもよいと思っていますので、最初っから設定しても良いんじゃないでしょうか。早速CSSを追記していきましょう。

追記する場所は親タグが良いので、bodyに追記するとうまくいくと思います。

おそらくbodyにはすでにcssがいろいろ書かれていると思いますが、そこに「-webkit-text-size-adjust:100%」を追記していきましょう。

body {
○○:いろいろ;
○○:書かれている;
○○:他の設定たち;
-webkit-text-size-adjust: 100%;
}

これだけでOKです。簡単ですね。これでスマホを横にしてもサイズが拡大されないので、レイアウトもずれなくなるはずです。

スマホを横にした時だけデザインがずれてしまって、原因がなかなかわからなかったのですが、分かってしまえば今後このことで悩むことはないと思います。

ぜひお試しあれ。