2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
こんにちは！昨日、思いもよらぬ不具合でなかなかの作業時間を奪われてしまった進藤です！
それはiPhoneで見るとなぜか文字が大きくなっているという問題です！
お知らせのスライダーを実装していましたが、1つ目のスライドは指定したfont-size: 12px;が効いているのに、なぜか2つ目のスライドにはスタイルが効いておらず、文字が大きくなっていました。
スタイルが効いている状態(1つ目)
スタイルが効いていない状態(2つ目)
2つ目は1つ目と比べてどう見ても文字が大きい！
同じスタイルを効かせているはずなのに、どう考えてもおかしいです。!importantを使うなどして優先度を上げても全く意味なく…
いろいろと調べたところ、iPhoneには自動でフォントサイズを調整する機能があるようです。それで意図しないところフォントサイズが大きくなってしまいます。
これを解決するには、-webkit-text-size-adjustをhtmlタグまたはbodyタグに指定します！
指定することで、iPhoneが自動でフォントサイズを調整することを防ぎます。
html {
-webkit-text-size-adjust: 100%;
}ブラウザやOSごとに見え方が変わるのは本当に困りますね！
こんなことで時間を費やしてしまうのはもったいないのでぜひ覚えておいてください！
こちらの記事もおすすめ
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/