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

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

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

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

例えばこんな感じ。

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


この記事をかいた人

ドレッド Webクリエイター

WordPressの構築やjQueryによる動的サイトの実装が得意なWebクリエイターです。このブログではWeb制作で役に立ちそうな知識から、プライベートの出来事まで幅広いネタを取り扱っております。ご質問、ご要望はお問合せフォームからどうぞ! お仕事のご依頼はコレカラウェブへ! 2016年10月から放送大学に入学(選科履修生)

CSS | Posted on 2014/03/23 13:57

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。