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 上不正确地显示