如何使用HTML/CSS在iPhone上显示代码

无可否认，iPhone不是查看代码的最佳平台，但我希望尽我所能优化我网站的移动部分。我在正确显示代码（在本例中为Java代码）时遇到问题

---

我正在使用

您是否尝试为预块设置宽度或最小宽度？或者尝试块的其他位置或显示属性。可以尝试浮动它或显示：table。只是一些想法。
我不确定pre是否接受overflow属性，但我会尝试设置它，如果不接受，则将其包装在一个div中并在那里进行背景处理，这将使您在格式化选项上有更多的自由度。（例如，如果您想在每个部分下面有几个代码块，并带有“标题”）
多么奇怪的错误！我可以在真实的iPhone上复制它。我猜这是由iPhone处理数据的方式引起的。您应该澄清的一件事是页面中的视口设置（通过元标记）。你的屏幕截图显示它比默认的980像素小。我尝试用各种方式修补视口，但无法阻止此错误的发生

<pre>
String input = readUserInput();  // assume defined elsewhere
int i;

try {
    i = Integer.parseInt(input);
} catch (NumberFormatException exception) {
    System.err.println("You entered an invalid integer: " + exception.getMessage());
}
</pre>

我有一个解决方法，就是在预块上设置一个宽度参数。即：



这是一个糟糕的解决方案，有几个原因；它会生成一个固定宽度的块，它会扭曲你的边框，等等。但它确实会生成一个比视口更宽的彩色背景块。也许你可以接受它，或者它是一个真正解决方案的基础。
我的视口设置如下：很高兴听到它是可复制的。是的，我尝试过编码宽度，这是一种黑客行为，但它的副作用是导致
标记中的字体样式混乱；我会得到一个奇怪的11和12磅字体的组合，它们都应该是11磅。很奇怪。由于某种原因，这会弄乱字体。
pre {
    font-weight: bold;
    border: 2px solid green;
    background: #669999;
    padding: 5px;
}

<pre style="width: 50em;">