Blogger:SyntaxHighlighter(3)iOS Safariで行番号がずれる問題を解決

前の関連記事：Blogger:SyntaxHighlighter(2)表示をカスタマイズ

前回の記事で導入したままではiOS Saferiのウェブバージョンでだけ行番号がずれて見えています。この問題を解決するまでに長い時間を要しました。修正する方法はすごく簡単だったのですがその方法を見つけるが大変でした。

モバイルバージョンでは行ずれが起こらず

iOS(6.1.3)　Safariではこのように行番号がソースコードの上のほうにずれて小さく表示されてしまいます。

ところがBlogger：ラベル設定(4)モバイルサイトでラベルリストを表示にあるようにモバイルテンプレートをカスタムに変更してモバイルバージョンで見てみると行ずれがありません。

なにが違うのでしょう？

iOS　Safariでソースを見てみてもSyntaxHighlighterの部分は全く同じでした。

Chromeの右クリックメニューの「要素を検証」でフォントの大きさをみてみるとウェブバージョンは行番号は16px、コードは16pxと18pxになっています。

Blogger：テンプレート編集(6)モバイルサイトの表示にあるようにアドレスの最後に「?m=1」をつけてモバイルバージョンでも要素の検証をしてみると、こちらでは行番号が17px、コードは17pxと19pxでした。

SyntaxHighlighterのCSSのfont-size、line-heightをemからpx指定にしても改善せず

SyntaxHighlighterのCSSをみるとフォントサイズや行の高さが文字に対する相対単位である「em」で指定されている部分があり、これを絶対単位の「px」で指定するとよい、と書いてあるページもあったため変更してみましたが全く問題は解決しませんでした。

ここで行き詰ってしまい、このiOS Safariでの行ずれ問題はSyntaxHighlighter導入時から気づいていたものの長らく解決方法がわかりませんでした。

iOS Safariで勝手に文字の大きさを変更する機能を無効にすればOK

日々探索した結果、iOS版safariの「文字サイズ自動調整」がいやらしい。 - freefielder.jpにたどり着きました。

iOS Safariには独自の文字大きさ自動調整機能があるらしいです。

この機能を無効にするプロパティが「-webkit-text-size-adjust: 100%;」とのことです。

.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
overflow-y: hidden !important;
-webkit-text-size-adjust: 100%;
}

このようにSyntaxHighlighterのshCore.cssの上記の部分に追加しました。


行ずれが解決しました。

「SyntaxHighlighter」、「行ずれ」とか「SyntaxHighlighter」、「gutter」とかいろいろ検索してもこの「-webkit-text-size-adjust: 100%;」と「SyntaxHighlighter」を結びつけて解決しているページが見当たらず試行錯誤しました。

参考にしたサイト

iOS版safariの「文字サイズ自動調整」がいやらしい。 - freefielder.jp
最初に手ががりを与えてくれたページです。

iPhone版Safariで文字サイズがおかしくなるときは-webkit-text-size-adjust: 100%; を指定する | memobits
-webkit-text-size-adjust: 100%; の解説。

次の関連記事:Blogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードする