> スマホサイト作成で特定の文字のサイズだけ大きいときの修正方法

スマホサイト作成で特定の文字のサイズだけ大きいときの修正方法


20160104-001

viewportのmetaタグも入れてスマホで見たときにうまく縮小されて画面に収まるように作ったのに、実際にスマホで見てみるとテキスト文字だけがサイズが大きくて結局レイアウトが乱れている。。。。
そんなときの解決法をご紹介。

メタや画像、CSSもちゃんと準備したのに、この文字サイズエラーのせいで台無し。。。

20160106-005

これほんとに悔しかったんです。
スタイルシートの横幅設定をピクセル指定から%に修正したり、スマホ画面に全体が収まるようにビューポートのメタタグを入れたり、スマホからでもなんとか最低限のデザインで見えるように調整したのに、一部分のテキストサイズの狂いで全部パー。
しかもこれ、全部のテキストサイズが大きくなるとかではなく、ところどころで混ざってくるのがややこしい。

解決法はけっこうあっさり見つかりました。CSSに1行足すだけ。

ランダムに出てくる文字サイズのズレ、これは手こずりそうな予感、と思ってたんですが解決方法はあっさり見つかりました。
スタイルシートにウェブキット系の文字サイズ指定を1行追加するだけ。

-webkit-text-size-adjust: 100%;

うんうん、簡単でよろしいじゃないですか♪
もうめんどくさいからクラス名指定じゃなく、divタグにこの設定を入れちゃって修正完了と。

と、思いきや、アンドロイドスマホのクロームから見てみると、、、、、
キー!!!まだテキストサイズのエラーが残ってる。
やっぱりなー、嫌な予感はしてたんですよ。

アンドロイドChrome用にCSSをもう1行だけ追加。

はーこういうハック的なことはあまりやりたくないので必要ないときはできるだけ使いたくないんですが、今回の仕事では見た目のデザインが崩れてしまうことのほうが問題なので、アンドロイドスマホのクロームブラウザで見たときのためだけのCSSを追加しました。

max-height: 999999px;

なんかちょっと気持ち悪いんですが、現状で即解決となるとこういう結論にたどりついてしまいました。
いずは根本的な解決方法が出るでしょうが、いまはこれでガマンガマン。

div {
	max-height: 999999px;
	-webkit-text-size-adjust: 100%;
}

うちでは今回はdivタグに上記2つのスタイルをガッツリ追加して、とりあえずの解決です。
すべてのサイトに基本的な設定として入れる気にはならないですが、1つの解決法として持っておくにはシンプルで比較的良い方法だと思います。


カテゴリー