IT

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

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

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

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

例えばこんな感じ。

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

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

ABOUT ME
アバター
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。フリーライターとWeb制作のお仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。中小企業診断士とFP1級を目指してハードに勉強中。

COMMENT

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

CAPTCHA