iPhoneで閲覧した時に文字サイズが勝手に変更されてしまうのを防ぐ方法

• 2015/06/08
• 
  • HTML&CSS

ツイート

パソコンやタブレット、Android携帯では正常に表示されるのに、iPhoneのSafariで見たときだけ文字サイズが変更されてしまうのを防ぐ方法です。

私は、iPhoneを持ってないので確認できませんが、iPhone用のSafariは、テキストの文字サイズを自動調整する機能があるらしいです。ちなみに、私が持っているiPad miniのSafariでは自動調整されないみたいです。

使う方としては便利ですが、サイトを作る方としては少々有難迷惑です。

背景画像で装飾された枠を表示して、その上にテキストを配置した場合。そのテキストの文字サイズが自動調整されてしまうと、枠から文字がはみ出してしまうからです。

-webkit-text-size-adjust: 100%; を指定する。

文字の自動調整の影響を受けたくないテキストの部分に -webkit-text-size-adjust: 100%; を指定するだけ。

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

この様に、bodyに対して指定してあげれば良いでしょう。

参考

• iPhone版Safariで文字サイズがおかしくなるときは-webkit-text-size-adjust: 100%; を指定する（memobits）