HTML移动字体大小输入按钮_Html_Css

HTML移动字体大小输入按钮

html css

HTML移动字体大小输入按钮,html,css,Html,Css,我正在尝试制作一个手机友好的网页。我在手机上和Chrome的设备模式下进行了测试。屏幕上显示的大部分文本足够大，无需缩放即可轻松阅读。我发现我的按钮和内联块div的文本要小得多。我试着用css来修复它，但我不明白为什么它们比其他任何文本都小当我试图创建一个小演示来发布在这里时，我发现另一个相当奇怪的事情正在发生。如果正文包含超过240个字符（显示的文本），则文本将根据需要显示为大文本，但如果少于241个字符，则文本将与按钮上的文本一样小。我在Chrome的设备模式中看到了这种情况，使用了很多设

我正在尝试制作一个手机友好的网页。我在手机上和Chrome的设备模式下进行了测试。屏幕上显示的大部分文本足够大，无需缩放即可轻松阅读。我发现我的按钮和内联块div的文本要小得多。我试着用css来修复它，但我不明白为什么它们比其他任何文本都小

当我试图创建一个小演示来发布在这里时，我发现另一个相当奇怪的事情正在发生。如果正文包含超过240个字符（显示的文本），则文本将根据需要显示为大文本，但如果少于241个字符，则文本将与按钮上的文本一样小。我在Chrome的设备模式中看到了这种情况，使用了很多设备，比如谷歌Nexus5。什么会导致这种情况发生

总之，这是我的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>


我的演示
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
小文本

我无法让它在JSFIDLE中显示我的问题，所以要查看它，您只需将其保存为html页面，并使用其设备模式在Chrome中运行即可。您应该看到，

标记中的数字显示得足够大，可以读取，而按钮上的文本和

div

非常小。如果去掉

中的一个字符，其文本应该与页面上的其他文本一样小

我想要的是到处都有更大的文本，这样在移动设备上很容易阅读，而在桌面上查看时不会变得特别大。如何修复此问题？

您忘记添加

在您的头部区域。还要考虑到p标签中的字体系列和字体大小将不同于按钮标签中的字体系列和字体大小。

看了一眼，它适用于我指定的内容，但除了示例html之外，我还有一个以像素为单位指定宽度和高度的图像，这使得图像变得比我想象的要大得多。你知道只调整字体大小的方法吗？另外，我知道这些字体会有所不同，我有css来修复细微的差异。发生这种情况很正常，你说你想创建一个手机友好型网站。。。这意味着您需要在定义图像宽度和/或使用媒体查询以特定窗口宽度为目标时使用百分比。因此，在某种程度上，mobile-friendly=定义元视口，使用百分比和媒体查询。