我在获取预格式化文本以在iPhone上正确渲染时遇到问题。
如果我只做一个预先格式化的项目，事情看起来还可以(下面的代码(。
<!DOCTYPE html>
<html>
<head>
<title>Problem with <pre></title>
</head>
<style>
pre {
background-color: rgb(30, 30, 30);
color: rgb(200,200,200);
}
</style>
<body>
<!-- exactly 80 characters -->
<div style="width:80ch"><pre>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</pre></div>
</body>
</html>
从我的iPhone
但当我尝试在有序列表中做同样的事情时(下面的代码(。
<!DOCTYPE html>
<html>
<head>
<title>Problem with <pre></title>
</head>
<style>
pre {
background-color: rgb(30, 30, 30);
color: rgb(200,200,200);
}
</style>
<body>
<div style="width:80ch"><pre>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</pre></div>
<ol>
<li> <div style="width:80ch"><pre>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</pre></div>
</ol>
</div>
</body>
</html>
从我的电脑加载这个时，一切看起来都很好，但在我的iPhone上，不仅缩进的那个乱了，现在原来的那个看起来也错了。这几乎就像我添加列表时字体大小发生了变化。
从我的手机
两个版本的链接：
第一个
第二个
如何在手机上正确运行此功能？我需要宽度为80个字符宽，这样我才能显示标准的终端输出。
css单元ch实际上是0(零(的宽度。因此，为了让代码正常工作，您必须确保父元素使用的是单空格字体，并且它是网络安全的，以便您的手机使用该单空格字体。
在您的情况下，div和li使用ch单元，因此div和li需要具有单空间字体，因为它们不会继承自子pre标记。您还需要在pre元素及其父元素之间设置匹配的字体大小。