taccuma note

iPhoneでSyntaxHighlighterの表示が崩れるときの対処法

iPhone-syntaxhighlighter-1

このブログではソースの表示にWordPressのプラグイン「SyntaxHighlighter Evolved」を使っているのですが・・・パソコンで見たときはキチンと表示されているのに、iPhoneでは何故か表示が崩れているのを発見してしまいました。なんか行番号とソースの行間が合ってないというか、ソースを表示してる箇所だけフォントサイズが無駄にデカいです。MacのChromeにあるデベロッパーツールでiPhone上の表示も崩れていないことを確認してたんですが、実際のiPhone上ではこんな感じで表示崩れてますw

最初はSyntaxHighlighter Evolvedのスタイルを変更しているから崩れたのかな?とCSSをSyntaxHighlighter Evolvedの初期設定に戻したんですが・・・それでも何故かiPhone上ではスタイルが崩れています。何でだろう?って思って調べたら解決方法が分かったのでご紹介します。

SyntaxHighlighterのCSSに1行追加しよう

iPhone-syntaxhighlighter-2

こんな風に表示が崩れているiPhone上のSyntaxHighlighterをCSSで修正します。
CSSに以下を追記してください。

.syntaxhighlighter {
  -webkit-text-size-adjust: 100%;
}

プラグイン上のCSSに-webkit-text-size-adjustに関する記述が見当たらないので、追記を行うCSSはお使いのテーマのstyle.css上で問題ないと思います。style.css上に上記のスタイルを追記すれば、プラグインのCSSに問題なくoverrideされるので、この問題でお困りの方はお試しください。

iPhone-syntaxhighlighter-3

こんな感じで正常に表示されていれば、修正完了です!

この記事をシェアする

コメント

コメントは管理人の承認後に公開されます...

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最近の投稿

おすすめ

タグクラウド

カテゴリー

関連記事&スポンサーリンク