iPhoneで文字が大きく表示されてしまう場合

広告

SyntaxHighlighterを使って表示されたソースコードがiPhoneから閲覧した場合に文字が大きく表示されてしまう場合があります。ここではその対処方法について解説します。

iPhoneでWebサイトを見た時に、行番号に対してソースコードの部分が次のように文字が大きく表示されレイアウトが崩れてしまうことがあります。

p5-1

これはiPhone(に限らずですが)の文字サイズを自動調整する機能が原因です。対処方法としては「shCore.css」ファイルをテキストエディタで開いて次の1行を追加します。(shCore○○○.css系を読み込んでいる方は、同じように修正して下さい)。

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

「-webkit-text-size-adjust」は自動調整に関する設定を行うためのもので次の3つの指定が可能です。100%を指定した場合は、親要素のフォントサイズに合わせることを意味しています。(参考:text-size-adjust - CSS | MDN)。

/* 自動調整を行わない */
text-size-adjust: none

/* 自動調整を行う */
text-size-adjust: auto

/* 親要素のフォントサイズに対しての割合を%で指定 */
text-size-adjust: <percentage>

設定は以上で終了です。修正後にどのように表示されるのか確認してみるとiPhoneの場合でも文字が大きく表示されることはなくなります。

p5-2

スマートフォンを縦向きと横向きのどちらにした場合でも問題なく表示されています。

( Written by Tatsuo Ikura+ )