モバイルサイトの文字サイズ指定の際に気をつけるプロパティ -webkit-text-size-adjust

モバイルサイトの文字サイズ指定の際に気をつけるプロパティ -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% 適応前

文字が大きくてみにくい


 ↓↓

-webkit-text-size-adjust: 100% 適応後

-webkit-text-size-adjust: 100% 適応後

整いました

Related Article

5 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop レスポンシブ Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能