在移动设备上，字体大小根据段落数而不同
Jem*_*Jem 2 html css wordpress fonts font-size
我\xe2\x80\x99m 遇到一个问题，我可以\xe2\x80\x99t 确定我为某人编写的Wordpress 主题。
\n\n在添加一定数量的段落之前，页面或任何页面上内容的字体大小都会不正确地缩放。
\n\n该问题特定于手机。
\n\n如果您有四个或更少的段落，则字体会非常小，如下所示：
\n\n
如果添加第五段，它会跳到预期的大小。
\n\n
这在开发人员工具\xe2\x80\x99 中是一致的，您可以测试各种设备尺寸选项，以及我能够在我家测试的两部手机。
\n\n不包含在媒体查询中的主类如下：
\n\n.sprogWeekOverview p, .post p{\n margin: .67em 0;\n font-family: Georgia, serif;\n font-size: 1.15em;\n color: #1f1f1f;\n padding: 4px;\n}\n其他带有媒体查询的 CSS 代码是：
\n\n@media screen and (max-width: 680px){\n\n .sprogWeekOverview p, .post p{\n margin: 8px 0;\n font-family: Georgia, serif;\n font-size: 16px;\n color: #1f1f1f;\n padding: 2px;\n }\n\n }\n\n@media screen and (min-width: 681px) and (max-width: 1024px){\n\n .sprogWeekOverview p, .post p{\n margin: 12px 0;\n font-family: Georgia, serif;\n font-size: 16px;\n color: #1f1f1f;\n padding: 2px;\n }\n\n}\nbody 标签有一个基本字体大小设置font-size: 16px;。
任何关于为什么会发生这种情况、如何修复它以及我\xe2\x80\x99m 做错了什么的见解都值得赞赏。谢谢。
\n为什么会发生这种情况
\n移动浏览器默认假设他们正在访问的网站是为大桌面屏幕而不是手机屏幕编写的。许多网站布局都有侧边栏或只能在大屏幕上使用的东西。因此，移动浏览器会模拟更宽的浏览器窗口，然后将其缩小显示，以便全部适合屏幕。这种缩小就是文本变小的原因。如果您确实想阅读，浏览器仍然允许您用两根手指放大文本。
\n另外，移动浏览器会尝试猜测页面上最重要的文本是什么，然后人为地增加其字体大小。这种妥协使得桌面设计新闻网站上的文章文本足够大，无需放大即可阅读，同时仍然使侧边栏缩小，这样它们就不会占用太多空间。这种字体大小膨胀就是标题 \xe2\x80\x9cWhat You Can Do\xe2\x80\x9d 一开始就已经很大的原因。
\n上述行为（缩小和字体大小膨胀）都是基于移动浏览器对页面外观的猜测。看起来在这种情况下，当您添加第五段时，移动浏览器最终意识到该页面在移动设备上很容易阅读，因此它们不需要模拟宽屏幕并将其缩小。但一般来说，您不应该\xe2\x80\x99 依赖移动浏览器使用的任何特定启发式方法。
\n如何修复它
\n您可以通过在 HTML\xe2\x80\x99s 中添加此标签来禁用页面的此功能<head>：
<meta name="viewport" content="width=device-width, initial-scale=1">\n这告诉移动浏览器您在小屏幕上测试了此页面并确认其保持可读，因此它们不需要尝试自动使网站适应小屏幕。<meta name="viewport">您可以在这篇 Mozilla 文章中阅读更多相关内容。
| 归档时间： |
|
| 查看次数： |
1526 次 |
| 最近记录： |