クロームの文字サイズが変動する不具合を機にフォントを大きくしました

クロームで発生したバグによって文字のサイズ設定を見直すことにしました。スマホでは少し見やすくなったかも……

ブログの文字サイズの大きさを拡大するべきか否か。

当ブログの文字サイズは標準的なサイズよりも若干小さめに指定していたので、実を言うとこの問題は以前から悩みの種の1つでもあったのですが、今回訳あって文字サイズを一新することを決意。px(ピクセル)から%(パーセント)指定に切り替え、文字のサイズが一回り大きくなりました。

これによってサイトが少し見やすくなったと思うのですが、せっかくなので文字サイズを変更するまでに至った経緯を、少しお話しさせてもらいたい。

きっかけはクロームのバグ(不具合)

私の場合、これまでPCのブラウザは「Google Chrome」、スマホは「Safari」を利用していたので、文字サイズなどは基本的にこの2つのブラウザを基準に決めてきたのですが、クロームで見た時の文字サイズが他のブラウザで見た時よりも大きいような気がする時があるのは前々から引っ掛かってはいました。

これはブラウザによってデフォルトのフォントが違うせいなのか、ブラウザ毎の最小フォントサイズが違うからなのか、正直言うと未だによくわからないのですが、ブログの運営に利用しているメインのブラウザがクロームだったので、私はこれまでの文字サイズはクロームで最も見やすいと感じた「15.5px」に指定していたのです。

ちなみにこの「px(ピクセル)」という単位は環境によって大きさが変化しない絶対値。なので、本来であればブラウザどうこうで文字サイズが変わることは基本的にはないはずなのですが、クロームで見ると大きく表示されている時があったのです。

そこで私は思う。クロームで見た時の文字サイズが他のブラウザで見た時よりも大きいのであれば、クロームでちょうどいいと感じた文字サイズは、他のブラウザで見ると小さく感じるのではないか?

これも以前からいくつかのブラウザで確認したところ、そうなっているような気はしてはいたのですが、ブラウザのシェアNo.1がクロームということもあり、これまで私は15.5pxを貫いてきたのです。

Android版クロームで問題は確信へと変わる

PCではクローム、スマホはサファリ。しかしここに来てスマホにAndroidが仲間入りすることになり、動作確認にAndroidのスマホが加わりました。

そこで、Androidスマホに元々入っていたブラウザで当ブログの文字サイズを確認してみたところ、文字サイズが大きく感じる現象は確信へと変化。明らかにクロームの方が文字が大きく表示されていたのです。

これは当ブログに限ったことではなくヤフーなどの大手サイトでも同じ現象が見られ、こうなるとクロームは表示される文字のサイズが端末やサイト、ページによっては大きくなることがある(?)としか思えなかったのですが、この問題は新たな局面へ。

原因を調べていくうちに、クロームでとんでもない不具合が発生していることを私は知ってしまったのです!

スマホ版クロームアプリの不具合

Androidのスマホはブラウザによって文字サイズが明らかに異なっている(というかクローム以外が小さくなってしまっている)ことが判明したので、こうなると文字サイズの設定をいじらなければならなくなってきたのですが、アンドロイド版クロームを確認していると文字サイズに関係する謎の不具合を確認。

ページをリロード(読み込み)すると特定の文字のサイズが大きくなったり小さくなったりするのです。

早速原因の究明に取り掛かかった結果、文字に付く「Pタグ」に文字をデザインできる「class」を指定した文字列にこの症状が起きることが判明し、様々なブラウザで確認したところ、

  • 縦向きにした時のアンドロイド版クロームのみで発生する
  • 同時期にクロームの不具合報告が多発
  • 他のブラウザではこの不具合は確認できない

以上のことから恐らくクロームの不具合によってブログの表示がおかしくなっていると推測されました。さらにその後、

  • ページで一番最初のclassを指定したPタグは正常に表示されるも、それ以下の同じPタグの文字列のサイズが小さくなる(cssが最初だけ効いてる)
  • クロームのバージョンをダウングレードしたところ、全ての文字が一律で小さく(大きく)表示される現象も発生
  • 一部フォントサイズを指定した箇所にデザイン等をいじれる「css」が効かなくなり、バランスが取れなくなる

といった不具合が続出。

できることは全てやってみるも打つ手なし。頭を悩ませながらも辿り着いたフォントサイズは滅茶苦茶になり、運営しているブログを確認するとデザインがガタガタ。

このままだと精神衛生に多大な影響を及ぼし兼ねなかったのですが、しかし、私はこの時感じたのです。これはクローム以外のブラウザを使用するユーザーのためにフォントサイズを大きくせよという天啓、神からのお告げなのだと。

クロームアプリをそっと閉じた私は、ついに文字サイズをクローム基準にすることをやめ、それ以外のブラウザを基準として設定し直すことにしたのです。

文字サイズを変更した箇所

様々なブラウザを確認できるだけ確認してみたところ、やはりクローム以外のブラウザでは全てサイズは統一されていたので、設定していたフォントサイズを一回り大きくすることにしました。

具体的にはフォントサイズを細かく指定している全ての箇所を変える必要が出てきたのですが、今回の変更に伴って「px」での指定は廃止。

というのも、今までのようにフォントサイズをpxで指定していると、また何かが起きた時に全ての指定箇所を変更しなければならなくなるからです。

そのためフォントサイズの指定方法は、大元のサイズを変更すれば全てに変更が適用される「em、rem、%」から選ぶ必要があったのですが、私は普段から接する機会も多く、直感的にもわかりやすい「%」をチョイス!

全体のバランスを考えながら文字サイズの変更をしていくのも一苦労ではあったのですが、ベースのサイズは「108%」とすることで表示される基本的なサイズは「16pxちょっと」と、これまでよりも5%ほど大きくなりました。

フォントサイズ変更前

ちなみにこちらが文字サイズを変更する前。スマホで15.5px。

フォントサイズ変更後

こちらが文字サイズ変更後。スマホで16pxちょっとです。

また、記事の一部だけ文字を大きくしている場所などもいじる必要が出てくる訳で、これは「Search Regex」というWordPressのプラグインで一括変更することもできるのですが、

サーチリジェックスの進行画面

どうもこのプラグイン、文字列の変更作業の進行が0%から進まず、キャンセルを押さないと作業が完了しない(一応文字列は変更できている)という怪しい挙動をするので、全て手作業で変更。

骨の折れる作業でしたが、これで一応当ブログの文字サイズ変更は完了したので、文字サイズが小さく見えていたブラウザでは少し見やすくなったと思います。

例によってAndroidのクロームは文字サイズがさらに大きくなりましたが……

今回のまとめ

・クロームの文字サイズが大きいのは謎
・特にAndroidスマホのクロームでその現象が起こる
・文字サイズの「px」指定は早めの変更が吉かもしれない

クロームの文字サイズが他ブラウザと比べて大きいのはブラウザの設定に問題があるのか、それともこれも不具合によるものなのか、もしくは端末特有のものなのかは謎なのですが、解決することがあれば追って報告したいと思います。

また、文字サイズをpxで指定しているといずれ変更を余儀なくされた時にかなりの労力を費やすことになる可能性が高いので、文字サイズを変更しようか迷っている時はなるべく早めに対応した方が良いかもしれません。

そして今回の話で一番大事なところはこれです。px指定は手遅れになる前に、早めに変更した方がいいかもしれない……

関連記事

クロームの文字サイズ不具合が解決しました
Androidスマホのクロームで文字サイズが大きくなるバグの修正完了!

スポンサーリンク
この記事をシェアする

コメントを残す