スマホChromeの自動文字調整よ!なぜそのように荒ぶるのか!対策。

技術記事強化週間(恐らくすぐやめる)

chromeの文字サイズ自動調整機能ってご存知です?

スマホ向けwebサイトの調整をしているとちょこちょこコイツが

邪魔をするのだ(‘A`)

ユーザーからすると10px以下の文字を自動で大きくする素晴らしいやつ。

ですが開発者からすると10pxと言わず小さい文字はChromeの手によっていい感じの大きさまで膨れ上がる。

今回はコイツを掻い潜っていい感じのフォントサイズの設定をしたいと思います。

まず検索で引っかかるのは恐らく

-webkit-text-size-adjustのを使って自動調整を無効化する方法だと思います。

-webkit-text-size-adjust: none を絶対に設定してはいけない理由

おぉ、これを使えば一発じゃないか!

と意気揚々と僕も書き込むわけですが、どうも、既に設定されている。

き、効いてねぇー!

最近のChromeでは既に無いパラメータとなっているらしく、もはや意味が無い。

これを設定するだけでは自動調整の罠から抜け出せない!

 

じゃ、じゃあどうすれば(‘A`;)

 

[HTML/CSS] スマホサイトで「-webkit-text-size-adjust」が効かない時の対処法

AndroidのChromeでフォントサイズが大きくなってしまう不具合は「max-height」で解決するかも

探せばあるんです。求めている情報が!

[code lang=text] <br /><code class="keyword">max-height</code><code class="plain">: </code><code class="value">100%</code><code class="plain">;</code>

[/code]

たった、これだけだったんです。

これで確かに設定した文字サイズのまま表示されるようになりました。

 

…しかし、なぜこれで表示が最適になるのだろう。

仮説:Chromeは文字フォントを直接いじるのではなく、とあるブロック単位でzoomなどで大きくしているので、個別に高さ設定があった場合崩れるおそれがあるから触れない。

高さ事大きくしちゃう、なんて設定にするかなぁ。なんて思いつつも…

 

まぁひとまずこれで解決です。よかった。