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

2023年11月4日 276次阅读

iPhone无疑是查看代码的最佳平台,但我想尽可能优化我的网站的移动部分.我无法正常显示代码(在本例中为
Java代码).

我正在使用< pre>标签,以及一些CSS,为代码渲染一个漂亮的小背景.看起来不错：

但是,如果您滚动查看其余代码,则会得到以下结果：

< pre>内的文字正确渲染,但背景颜色停在设备的宽度.我已经在模拟器,运行3.0的3G设备以及运行3.1-beta的3G中尝试了这一点,他们都表现得这样.

它在Mac上的Safari中渲染得很好;只是不在iPhone上.

这是HTML：

<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>

而CSS：

pre {
    font-weight: bold;
    border: 2px solid green;
    background: #669999;
    padding: 5px;
}

最佳答案 多么好奇的虫子！我可以在真人iPhone上重现它.我猜它是由iPhone如何处理
viewport settings引起的.你应该澄清的一件事是你的页面中有什么视口设置(通过元标记).您的屏幕截图显示它比默认的980像素大小小.我尝试以各种方式修改视口,但无法阻止此错误发生.

我有一个解决方法,即在pre块上设置width参数.即：

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

出于几个原因,这是一个糟糕的解决方案它会产生一个固定宽度的块,它会使你的边框变得松散等等.但它确实会产生一个比视口宽的彩色背景块.也许这对你来说是可以接受的,也许它是真正解决方案的基础.

点赞