1行書くだけ、iphoneで文字サイズが勝手に変更されてしまう場合の対処法

2017年9月17日

レスポンシブでサイトを作成していると遭遇するかと思います。
iphoneの横向きの時だけ文字サイズが拡大されてしまう場合の対処法です。

CSS

  1. body {-webkit-text-size-adjust: 100%;}

たったこれだけです。

-webkit-text-size-adjust の他のステータスは
auto
none
パーセント
となっていて、autoがデフォルトとなります。
autoだとiphoneと一部アンドロイドの場合に文字が拡大されてしまうので、noneで拡大機能自体を無効にしてしまうか、100%で自動で変更されないようにするかです。
ちなみに、noneの場合はWindowsの拡大機能に支障が出るようです。（参考：てっく煮ブログ）

CSSCSS3, iphone, リキッドデザイン, レスポンシブデザイン

Posted by アツシオクムラ