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

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

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

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

例えばこんな感じ。

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

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project

関連記事


この記事をかいた人

ドレッド Webクリエイター、ライター

Web制作やライティングなどインターネットを使って自由に暮らしているドレッドです。このブログではWeb制作やライティングでお役に立ちそうな知識から、ドレッドのプライベートな出来事まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

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

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

コメントを残す

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