【CSS】スマートフォン等での縦向き・横向きそれぞれの画面で文字サイズが変わるのを防ぐ方法

どうも、最近サイトのブラッシュアップを目論んでいるnaouniverse( @naouniverse708 )です。

iPhoneやAndroid のブラウザは、縦向き(Portrate mode)と横向き(Landscape mode)それぞれの画面で文字サイズを自動で調整する機能があるのですが、今の所あんまりうれしくない機能です。

文字サイズが可変するのを防ぎたい為、以下に対処方法を備忘録として残しておきます。

文字サイズが変わるのを防ぐ方法

指定したい要素内に、

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

を追加すればOK。

-webkit-text-size-adjust: none;

でも出来るが、ユーザビリティーが落ちる理由であまり良くないらしいです。
それについては下記ブログが参考になります。

via:-webkit-text-size-adjust: none を絶対に設定してはいけない理由 - てっく煮ブログ

あとがき

当ブログはPC・スマホそれぞれにHTML・CSSを分けているので、後者の none でも問題ないとは思いますが、今後の事も考えて 100% で記述したほうがよさそうです。