在移动设备上，字体大小根据段落数而不同

问题描述 投票：0回答：2

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

}

正文标签的基本字体大小设置为

font-size: 16px;
。

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

html css wordpress fonts font-size
2个回答
4
投票

为什么会出现这种情况

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

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

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

如何解决

您可以通过在 HTML 中添加此标签来禁用页面的此功能 

<head>
:

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

这告诉移动浏览器您在小屏幕上测试了此页面并确认其保持可读，因此它们不需要尝试自动使网站适应小屏幕。您可以在

这篇 Mozilla 文章
中阅读有关 <meta name="viewport"> 的更多信息。

0
投票

要禁用浏览器的通货膨胀算法，您可以设置：

text-size-adjust: none

到您的 CSS 文件。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.