WordPressなどを含む、BlogやWebサイトを運用している人向けのお話です。
結論から言いますと、iPhoneで文字サイズ指定がうまく効かなくてレイアウトが崩れるときにはスタイルシートに以下を加えてみて下さい。
* { -webkit-text-size-adjust: 100%; }
Apple Storeはレスポンシブデザインを使っていません。
どんな画面でも縮尺が異なるだけで、同じように全体を俯瞰して見る事ができます。
※パソコンやタブレットのような大画面と、スマホのような小画面のどちらでも、うまいことレイアウトを組み替えて見せるデザインをレスポンシブデザインと言います。
このようなレイアウトを意識して作ったはずのWebサイトが、iPhoneで見るレイアウト崩れを起こすことがあります。
iPhoneではなるべく読みやすいように文字サイズが自動調整されるからです。
そんな時には
* { -webkit-text-size-adjust: 100%; }
で修正できます。
-webkit-text-size-adjustは文字サイズの調整に関する設定で、iPhoneの縦横切り替えで文字サイズがうまいこと切り替わるのもこのおかげです。
ちなみにnoneではなく100%を指定して下さい。noneだとユーザの意思による文字サイズの拡大縮小ができなくなるので、利便性に問題が出てしまいます。
特に、Apple Store風にパソコン向けのページをそのまま縮小してiPhoneでも表示させる場合には、この設定であることが重要になります。
WordPressのテーマで同様の現象が起きた場合にも
* { -webkit-text-size-adjust: 100%; }
を加えれば直ると思います。
この問題の対処法として -webkit-text-size-adjust:none; とちらほら見かけるので、より望ましい対処方法をご紹介しました。
iPhoneの文字サイズ自動調整で困っている方の参考になれば幸いです。
お問い合わせについて
業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
※ご契約前のコメントやメールでのやりとりは無料です。
