Question

我正在尝试创建一个也适合移动设备的网页。我在手机和Chrome的设备模式下测试了它。屏幕上的大部分文本都显示得足够大，无需缩放即可轻松阅读。我发现我的按钮和内联块div的文本要小得多。我试着用css来解决它但我无法弄清楚为什么它们比其他任何文本都要小。

当我试图在这里创建一个小型演示时，我发现了另一个相当奇怪的事情。如果正文保存超过240个字符（显示的文本），则文本将根据需要显示较大，但如果我的字符少于241个，则文本将与按钮上的文本一样小。我看到这种情况发生在Chrome的设备模式中，使用了许多设备，例如Google Nexus 5.会导致这种情况发生的原因是什么？

无论如何，这是我的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>My Demo</title>
</head>
<body>
    <input type="button" value="Click Me">
    <p>1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 1234 123456</p>
    <div style="display: inline-block;">small text</div>
</body>
</html>

我无法在JSFiddle中显示我的问题，所以要看到它，您可以将其保存为html页面并使用其设备模式在Chrome中运行。您应该看到p标记中的数字显示大到足以阅读，而按钮和div上的文字非常小。如果你摆脱了p中的一个字符，它的文字就会变得和页面上的其他文字一样小。

我想要的是在任何地方都有更大的文字，因此它可以在移动设备上轻松阅读，而在桌面上查看则不会变得特别大。我该如何解决这个问题？

Answer 1

您忘记在头部添加<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>。另外还要考虑到p-tag中的字体系列和字体大小与按钮标签中的不同。

按钮中的HTML移动字体大小

1 个答案: