我遇到了一个问题，我无法确定我为某人编写的 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 的 <head> 中添加此标记来为您的页面禁用此功能。 :
<meta name="viewport" content="width=device-width, initial-scale=1">
这会告诉移动浏览器您已在小屏幕上测试了此页面并确认它保持可读性，因此他们不需要尝试自动调整网站以适应小屏幕。您可以阅读更多关于 <meta name="viewport"> 的信息在 this Mozilla article .
关于html - 在移动设备上，字体大小因段落数而异，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37824744/