2022.07.20
【第１回】Photoshopでテキストの一部の色を変える方法！＜初心者...
デザイン
制作
こんにちは！昨日、思いもよらぬ不具合でなかなかの作業時間を奪われてしまった進藤です！
それは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ごとに見え方が変わるのは本当に困りますね！
こんなことで時間を費やしてしまうのはもったいないのでぜひ覚えておいてください！
こちらの記事もおすすめ
この記事をシェアする
株式会社スピカデザイン
質問・感想などはこちら！
REQUEST
ご意見、感想や記事のリクエストなど
メッセージお待ちしております！
https://spiqa.design/
spiqa_design