スマートフォンサイトで文字サイズを自動調整させない

iPhone の Mobile Safari や Android の Google Chrome は、画面の向きに合わせてテキストの文字サイズを自動的に調整してくれます。スマートフォンの小さなウィンドウでは、必須の機能といえるでしょう。
しかし、meta タグで viewport を使用して、スクリーンサイズに合わせてスケールを変更しないように設定した場合、テキストサイズのみが変更されてサイトのデザインが崩れてしまいます。

そこで、CSS の -webkit-text-size-adjust を使うことで、文字サイズの自動調整を無効化します。

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