モバイルサイトの文字サイズ指定の際に気をつけるプロパティ -webkit-text-size-adjust
このブログをレスポンシブに変えた時に、「SyntaxHighlighter」で表示するコードの部分、しかもボックスからはみ出てスクロールが必要な場合にのみ、文字サイズが指定できないという事がありました。（レスポンシブWebデザインにする為に行った事のまとめ | memocarilog）
-webkit-text-size-adjust プロパティというものがあるようで、それの仕業という事が判明しました。
webkit系の独自の仕様みたいですが、文字サイズを自動調整するCSSのプロパティで、デフォルトは「 -webkit-text-size-adjust: auto; 」となっており、モバイルサファリ等で見た時に文字サイズを自動調整するようになっています。これをCSSだけで文字調整するようにするには ”none” “100%” を指定して自動調整しないようにする必要があります。
！2013/10/8追記 コードを変更しました
-webkit-text-size-adjustの値を none としていましたが、Chrome・Safariでページの拡大/縮小機能に不具合が出るようなので 100% へ書き換えました。
使用例
CSSだけで文字調整するようにするには、CSSファイルへ下記のように記入します。
body {
-webkit-text-size-adjust: 100%;
}
これで、「SyntaxHighlighter」で表示されたコードの部分も文字サイズ指定が出来るようになりました！
-webkit-text-size-adjust: 100% 適応前
文字が大きくてみにくい
↓↓
-webkit-text-size-adjust: 100% 適応後
整いました
5 Comments & Tracbacks