雑が喰おう

-webkit-text-size-adjust:100%;を設定しよう

SyntaxHighlighterのフォントサイズ指定が邪魔という記事を書いた時には、これで万事解決と思っていたのですが、うまくいっていませんでした。

解決していなかったフォントサイズ

見てもらうとわかるのですが、
フォントサイズが気に入らない
こんな感じで、ところどころフォントサイズが他よりも大きくなっているところがあるのです。

PCのChromeによるiPhoneエミュレータでは、こんな表示にはならないのですが、iPhone実機のChromeやSafariではこのように表示されてしまいます。

これは、フォントサイズを指定している部分をすべて削除しても同じで、やはりプラグインではなく、手動で入れようかとも考えたのですが、なにかプラグインの設定が関係していたり、キャッシュを読み込んでしまっているのかとかもと考えていたところ
iOS版safariの「文字サイズ自動調整」がいやらしい。 – freefielder.jp
こちらの記事を発見。

iOSの問題だった!?

さっそく
[css]-webkit-text-size-adjust: 100%;[/css]
を追記してみたところ…

-webkit-text-size-adjust: 100%; を追記
OKいきました。やった~!

ということで、SyntaxHighlighterのフォントサイズ指定が邪魔に書いたように編集するのではなく、以下のように設定しました。

[css].syntaxhighlighter, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody { margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: none !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-weight: normal !important; font-style: normal !important; /<em>min-height: inherit !important; *//</em> For IE8, FF & WebKit <em>/ /</em>min-height: auto !important;<em>/ /</em> For IE7 */ direction: ltr !important; -webkit-text-size-adjust: 100%; }[/css]

これでiOSからみてもスッキリです。

さいごに

今回は、-webkit-text-size-adjust: 100%;をshCore.cssに追記していますが、同じようなことが他のところでも発生しているのを回避する意味でも、リセットCSSやレスポンシブデザインの中に入れてもいいかもしれません。

スポンサード リンク

スポンサード リンク

»関連してそうな記事