WordPress 使用 SyntaxHighlighter 格式化的程式碼在 iPad/iPhone 上不正確地顯示

問題描述

我剛剛開始編寫一個程式設計部落格，我使用 SyntaxHightlighter Evolved 外掛來格式化我的程式碼。在大多數瀏覽器上，這是正常工作。但是，如果我嘗試從 iPhone 或 iPad 檢視網站，行號和程式碼將不再對齊。基本上，問題似乎是行號和程式碼字型是獨立的大小 (見下圖) 。

我假設有人必須看到這個問題，所以我諮詢了「甲骨文 Google」，但似乎找不到任何相關的東西。我也搜尋這個網站無效。

作為程式設計師，我看了原始碼，但意識到需要一些時間來瞭解它的工作原理並解決問題。

我正在使用 Wordpress 版本 3.1.2 與二十十主題版本 1.2

我有以下外掛活動：

WordPress 版本 4.1 的 Google Analytics(分析)
SyntaxHighlighter 版本 3.1.1

有沒有人看到 (有希望解決) 這個問題？還是有某種靈魂可以指向正確的方向？

如果您需要看到該網站，我的個人資料中會有一個連結。我不想 link-spam 😉

提前致謝！

更新：5/17/2011

我以為我已經找到了一個解決方案，但是它解決了 iPad 上的問題，這仍然是 iPhone 上的一個問題。所以賞金還是要抓住的。

最佳解決方案

這似乎是 SyntaxHighlighter 外掛使用的底層 js 庫的一個問題。我自己載入了 js 演示，並在我的 iPhone 上得到了相同的偏移結果。我還不清楚原因，但是溝槽號的字型大小與程式碼行不一致。

一個潛在的修復是將溝槽編號上的 font-size 調整一小部分以匹配程式碼。媒體查詢可用於定位並僅針對 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+行) 的 holds up well for me 。我沒有 iPad 進行測試。

次佳解決方案

事實證明，二十個主題的樣式表 (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 誰在寫作時是唯一一個想出一個可能的解決方案。

參考文獻

Code Formatted with SyntaxHighlighter Evolved Appearing Incorrectly on iPad/iPhone

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 使用 SyntaxHighlighter 格式化的程式碼在 iPad/iPhone 上不正確地顯示