css < pre>移动的浏览器中的文本很小;我该怎么修呢？

jei2mxaa 于 2022-12-24 发布在其他

关注(0)|答案(3)|浏览(122)

我有预格式化的文本，在桌面浏览器中看起来不错，但在移动的上，所有的文本都比正常文本小。如果我用ems或percent改变大小，在桌面上它会变大。我在谷歌上到处搜索解决方案，但到目前为止还没有找到。解决这个问题的最佳方法是什么？解释 * 为什么 * <pre>在移动浏览器中呈现得这么小的加分。

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

css

来源：https://stackoverflow.com/questions/27181837/pre-text-is-tiny-in-mobile-browsers-how-can-i-fix-it

3条答案

按热度按时间

esbemjvw1#

添加这个 meta线修复了我

<meta name="viewport" content="width=device-width, initial-scale=1">

赞(0）回复(0）举报 2022-12-24

ddrv8njm2#

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

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

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

赞(0）回复(0）举报 2022-12-24

r9f1avp53#

您可以使用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

赞(0）回复(0）举报 2022-12-24

我来回答

css < pre>移动的浏览器中的文本很小;我该怎么修呢？

3条答案

相关问题

热门标签

最新问答