在移动设备上，字体大小因段落数而异

Question

我遇到了一个问题，我无法确定我为某人编写的 Wordpress 主题。

在添加一定数量的段落之前，页面或与此相关的任何页面的内容字体大小不正确。

此问题特定于手机。

如果段落不超过四段，字体会非常小，像这样：

如果您添加第五段，它会跳到预期的大小。

这在您可以测试的开发人员工具的各种设备尺寸选项以及我能够在我家这里测试的两部手机中是一致的。

未包含在媒体查询中的主要 class 如下：

.sprogWeekOverview p, .post p{
    margin: .67em 0;
    font-family: Georgia, serif;
    font-size: 1.15em;
    color: #1f1f1f;
    padding: 4px;
}

其他 CSS 带有媒体查询的代码是：

@media screen and (max-width: 680px){

    .sprogWeekOverview p, .post p{
        margin: 8px 0;
        font-family: Georgia, serif;
        font-size: 16px;
        color: #1f1f1f;
        padding: 2px;
    }

  }

@media screen and (min-width: 681px) and (max-width: 1024px){

    .sprogWeekOverview p, .post p{
        margin: 12px 0;
        font-family: Georgia, serif;
        font-size: 16px;
        color: #1f1f1f;
        padding: 2px;
    }

}

正文标签的基本字体大小设置为 font-size: 16px;。

任何关于为什么会发生这种情况、如何解决它以及我做错了什么的见解都将受到赞赏。谢谢。

Answer 1

为什么会这样

移动浏览器默认假定他们正在访问的网站是为大型桌面屏幕编写的，而不是为移动 phone 屏幕编写的。许多站点布局都有侧边栏或仅在大屏幕上可用的东西。因此，移动浏览器会模拟更宽的浏览器 window，然后将其显示 zoomed-out 以使其完全适合屏幕。这种缩小是文本很小的原因。如果你真的想阅读，浏览器仍然允许你用两根手指放大文本。

另外，移动浏览器会尝试猜测页面上最重要的文本是什么，然后人为地增大其字体大小。这种妥协使得 desktop-design 新闻网站上的文章文本足够大，无需放大即可阅读，同时仍然制作侧边栏 zoomed-out，因此它们不会占用太多 space。这种字体大小 inflation 是标题“你能做什么”一开始就很大的原因。

上述行为 zooming-out 和字体大小 inflation 都是基于移动浏览器对页面外观的猜测。看起来在这种情况下，当你添加第五段时，移动浏览器终于意识到页面在移动设备上很容易阅读，所以他们不需要模拟宽屏并缩小它。但一般来说，您不应依赖移动浏览器使用的任何特定启发式方法。

如何修复

您可以通过在 HTML 的 <head>:

中添加此标签来为您的页面禁用此功能

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

这会告诉移动浏览器您在小屏幕上测试了此页面并确认它保持可读性，因此他们不需要尝试自动调整网站以适应小屏幕。您可以在 this Mozilla article.

中阅读有关 <meta name="viewport"> 的更多信息

在移动设备上，字体大小因段落数而异

On mobile, font size is different depending on the number of paragraphs

html

css

wordpress

fonts

font-size

为什么会这样

如何修复