スマホサイトで端末の向きによらず文字サイズを固定する方法

最近、RWDのコーディングをする機会があって、普段は使わないiPhoneのsafariとにらめっこしましてした。RWDについては詳しいサイトや参考書があるので、それを参考にしてください、ということで、コーディングの段階でひっかかったところをメモします。

それは、スマホの向きを縦から横にしたり、あるいは横から縦にしたりするとsafariで表示されるテキストの文字サイズが変更されてしまう、という問題です。正確に言うと、縦にしていたときより、横にしたときの方が文字サイズが大きくなってしまいます。

なんでこういうことになっているのかという正確な理由はわかりませんが、これだとうまくレイアウトできないので、なんとかこの機能をオフにしたい。というわけで、これはCSSで制御できちゃいます。

例えばこんな感じ。

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

CSSのどこかにこの「-webkit-text-size-adjust: 100%;」を追加すると、スマホの向きを変更しても文字サイズが変わらずに表示されるようになります。お試しあれ！

＝＝＝

コレカラウェブではWebライティングのお仕事を承っております。豊富な実務経験や国家資格を生かして、SEOに強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします！

「いいね！」と思ったら、クリックお願いいたします<m(__)m>

ABOUT ME

らぐち

コレカラブログ管理人のらぐちです。コレカラウェブという屋号でフリーランスとして、Webライティング・SEOコンサルティング・メディア運営・障害者支援のお仕事を一貫して承ってきました。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。

BLOG：https://corekara-web.net/blog/