スマートフォンサイトで文字サイズを自動調整させない

iPhone の Mobile Safari や Android の Google Chrome は、画面の向きに合わせてテキストの文字サイズを自動的に調整してくれます。スマートフォンの小さなウィンドウでは、必須の機能といえるでしょう。
しかし、meta タグで viewport を使用して、スクリーンサイズに合わせてスケールを変更しないように設定した場合、テキストサイズのみが変更されてサイトのデザインが崩れてしまいます。

そこで、CSS の -webkit-text-size-adjust を使うことで、文字サイズの自動調整を無効化します。

-webkit-text-size-adjust: 100%;

作成者: コネタねこ

上から読んでも『コネタねこ』、下から読んでも『コネタねこ』。贈り物に悩んだら、コネタねこの小ネタ帳。欲しくなっちゃうプレゼント、そんなアイデアのぞきにきてね♪

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です