その他

2022.04.06

【CSS1行で解決】iPhoneでフォントサイズが大きくなってしまう問題

こんにちは!昨日、思いもよらぬ不具合でなかなかの作業時間を奪われてしまった進藤です!

それはiPhoneで見るとなぜか文字が大きくなっているという問題です!

お知らせのスライダーを実装していましたが、1つ目のスライドは指定したfont-size: 12px;が効いているのに、なぜか2つ目のスライドにはスタイルが効いておらず、文字が大きくなっていました。

スタイルが効いている状態(1つ目)

スタイルが効いていない状態(2つ目)

2つ目は1つ目と比べてどう見ても文字が大きい!

同じスタイルを効かせているはずなのに、どう考えてもおかしいです。!importantを使うなどして優先度を上げても全く意味なく…

iPhoneで勝手にフォントサイズが大きなる原因と解決策

いろいろと調べたところ、iPhoneには自動でフォントサイズを調整する機能があるようです。それで意図しないところフォントサイズが大きくなってしまいます。

これを解決するには、-webkit-text-size-adjustをhtmlタグまたはbodyタグに指定します!

指定することで、iPhoneが自動でフォントサイズを調整することを防ぎます。

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

iPhoneでフォントサイズが大きくなってしまう問題

ブラウザやOSごとに見え方が変わるのは本当に困りますね!

こんなことで時間を費やしてしまうのはもったいないのでぜひ覚えておいてください!

こちらの記事もおすすめ

[card url=”http://note.spiqa.design/wp/cursor-pointer/”]

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2021.08.17

    【WordPress】記事に紐付いたタクソノミータームを表示する方法

    その他

  • 2022.07.07

    スケッチやラフ案に使える!iPadのおすすめ手書きメモアプリ3選【WEBデザイナー向け】

    その他

  • 2021.12.07

    カスタムタクソノミーページのURLをカスタマイズする方法

    その他

TAG

×