Question

我有预先格式化的文本，在桌面浏览器中看起来不错，但在移动设备上，相对于普通文本，一切都很小。如果我使用ems或百分比更改大小，它在桌面上缩放太大。我已经用Google搜索了所有解决方案，但到目前为止还没有运气。解决此问题的最佳方法是什么？用于解释为什么 <pre>在移动浏览器中渲染如此之小的加分点。

enter image description here

这是HTML的主旨;没有CSS：

<html>
<body>
   <div class="content">
      <article>
      <time datetime="2014-01-17 00:00:00 +0000 UTC">17 January 2014</time>

      <pre><code>$ go run program.go  # run a go program
      $ go build package   # build a go package; Cmake, Autotools, etc not required!
      $ go install package # install a go package
      $ go test package    # test a go package
      $ go get package     # get any public package from the Internet
      $ go fmt package     # format a go package
      </code></pre>
      </article>
   </div>
</body>
</html>

Answer 1

您可以使用CSS3 media queries根据屏幕宽度进行区分：

<style>
@media screen and (max-width: 700px) {
  pre {
    font-size: 120%;
  }
</style>

<pre>HEll yeah all these spaces
    and stuff</pre>

Answer 2

您可以使用CSS3的@media查询来解决这个问题。

示例：

@media screen and (min-width: 320px) and (max-width: 420px){ /* set appropriate sizes here */
  pre{
    font-size: 20px; /* or whatever size that you want, you can also use % as suggested by @sweaver2112 */
  }
}

Learn about @media in CSS3 | MDN

<pre> text is tiny in mobile browsers; how can I fix it?</pre>

2 个答案: