为什么会发生这种情况

Question

我遇到了一个问题，我无法确定我正在为某人写的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;。

对于为什么会发生这种情况，如何修复它以及我做错了什么，我们表示赞赏。感谢。

Answer 1

为什么会发生这种情况

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

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

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

如何解决

您可以在HTML <head>中添加此标记，从而为您的网页停用此功能：

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

这告诉移动浏览器您在小屏幕上测试了此页面并确认它保持可读性，因此他们无需尝试自动调整网站以适应小屏幕。您可以在this Mozilla article中详细了解<meta name="viewport">。

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

1 个答案:

为什么会发生这种情况

如何解决