web-dev-qa-db-ja.com

SyntaxHighlighterでフォーマットされたコードが進化し、iPad/iPhoneで正しく表示されない

私はプログラミングブログを始めたばかりで、SyntaxHightlighter Evolvedプラグインを使ってコードをフォーマットしています。ほとんどのブラウザでこれはうまく機能しています。ただし、iPhoneまたはiPadからサイトを表示しようとすると、行番号とコードが一致しなくなります。基本的に問題は行番号とコードフォントが独立したサイズになっていることです（下の画像を参照）。

私は他の誰かが問題を見たに違いないと仮定したので私はThe Mightly Oracle Googleに相談したが、何か関連性があるとは思えなかった。私も無駄にこのサイトを検索しました。

プログラマーになって私はソースコードを見ましたが、それがどのように機能するかを理解して問題を解決するには少し時間がかかることに気付きました。

Wordpressバージョン3.1.2とTwenty Tenテーマバージョン1.2を使用しています

私は以下のプラグインをアクティブにしています。

  • Googleアナリティクスfor WordPressバージョン4.1
  • SyntaxHighlighterバージョン3.1.1

他の誰かが（うまくいけば修正された）この問題を見たことがありますか？それとも、ある種の魂が私を正しい方向に向けることができるでしょうか。

あなたがウェブサイトを見る必要があるならば、それへの私のプロフィールにリンクがあります。リンクスパムはしたくありません;-)

前もって感謝します！

更新日：2011年5月17日

私は解決策を見つけたと思ったが、それはiPad上の問題を解決したが、それはiPhone上の問題のままであった。そのため、賞金はまだ増えています。

Syntax Highlighter Evolved

iphoneplugin-syntaxhighlighter
5
idz

Twenty Tenテーマのスタイルシート（style.css）はpreとcodeのサイズを独立して変更します。これが問題の原因と考えられます。さらに、フォントのサイズが大きくなり、他のテキストと比べてフォントが大きくなりすぎることがあります。

これらは問題を引き起こすラインです：

/* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */

pre {
    -webkit-text-size-adjust: 140%;
}
code {
    -webkit-text-size-adjust: 160%;
}

私はこれら二つのセクションをコメントアウトしました：

/* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */


/*
pre {
    -webkit-text-size-adjust: 140%;
}
code {
    -webkit-text-size-adjust: 160%;
}
*/

だから私は自分の質問に答えるという奇妙な立場にいると思います。これを見て時間をかけたすべての人に感謝します。特に@DaveKonopkaは、執筆時点で考えられる解決策を考え出す唯一の人でした。

3
idz

これは、プラグインが使用する基礎となるjsライブラリの SyntaxHighlighter で問題になるようです。私は自分でjsデモをロードして、私のiPhoneで同じ相殺結果を得ました。理由はまだはっきりしていませんが、ガター番号のフォントサイズがコード行と一致していません。

1つの考えられる解決策は、コードに一致するようにGutter番号のフォントサイズをわずかな割合で調整することです。メディアクエリを使用して、iPhoneおよびiPadデバイスにのみ修正を適用し、適用することができます。

私は次のコードをSyntaxHighlighter jsパッケージに付属の例に落としました。それは私のiPhoneの問題を修正しました。あなたはおそらくこのCSSをあなたのWordPressテーマに入れて同じ結果を得ることができます。

<style type="text/css">

/* ios safari line number fix */

  /* ipad */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    td.Gutter div.line { font-size: 1.4em !important; }
  }

  /* iphone */
  @media only screen and (max-device-width: 480px) {
    td.Gutter div.line { font-size: 1.4em !important; }
  }

</style>

それは 長いコードスニペット（50行以上）で私 にしっかりと耐えます。テストするiPadがありません。

3
Dave Konopka