HTML・CSS

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

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

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

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

例えばこんな感じ。

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

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

ABOUT ME
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。フリーライターとWeb制作のお仕事をしています。IT・セキュリティ・Web制作・金融・障害福祉など、専門性を活かして様々な分野で仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。所有資格:情報セキュリティスペシャリスト、応用情報技術者、FP2級、AFP、ウェブ解析士、SEO検定1級 など。

COMMENT

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

CAPTCHA