【问题标题】：On mobile, font size is different depending on the number of paragraphs在移动设备上，字体大小因段落数而异
【发布时间】：2016-10-15 22:30:02
【问题描述】：

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

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

这个问题是手机特有的。

如果您有四个或更少的段落，则字体非常小，如下所示：

如果您添加第五个段落，它将跳转到预期的大小。

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

媒体查询中不包含的主类如下：

.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;
    }

}

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

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

【问题讨论】：

标签： html css wordpress fonts font-size

【解决方案1】：

为什么会这样

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

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

上述行为、缩小和字体大小膨胀都是基于移动浏览器对页面外观的猜测。看起来在这种情况下，当您添加第五段时，移动浏览器最终意识到该页面在移动设备上易于阅读，因此它们不需要模拟宽屏并将其缩小。但总的来说，您不应依赖移动浏览器使用的任何特定启发式方法。

如何解决

您可以通过在 HTML 的 <head> 中添加此标记来为您的页面禁用此功能：

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

这告诉移动浏览器您在小屏幕上测试了此页面并确认它仍然可读，因此他们不需要尝试自动调整网站以适应小屏幕。您可以在this Mozilla article 中阅读有关<meta name="viewport"> 的更多信息。

【讨论】：

我知道视口对于各种事物以及像素纵横比都很重要。在这种情况下，我忽略了它。我完全知道的是浏览器会猜测哪些内容比其他内容更重要。我假设随着 html5 变得越来越重要，我应该使用这些元素来更好地布局页面并让浏览器了解什么是重要的或它在看什么？以及正确配置视口。
@New_Wav 不，您不应该尝试为浏览器设计关于哪些元素重要的提示。浏览器使用的启发式方法没有记录，并且可以随时更改。直接跳到使用<meta name="viewport">，它会禁用重要性启发式算法，并让您完全控制每个元素应具有的文本大小。