html - html 在所有设备中保持相同的字符大小

Question

我用几个输入按钮做了一个关于 html 的练习：http:
//bullmalay.appspot.com/
我在我的手机上访问它。但我发现文字大小真的很小。我认为原因与分辨率有关。
任何人都可以帮助我了解文字大小吗？我希望它可以在我的笔记本电脑中显示类似的尺寸。

附言。
我搜索了有关 css:@media (min-width: 702px) 的信息，然后设置了字体大小。但是我认为即使是小型设备也可以具有比我的笔记本电脑高的分辨率。尺寸会比我笔记本电脑屏幕上显示的要小。
我认为大小应该是：fontSize *（我的笔记本电脑的每像素宽度）/（该设备的每像素宽度）。但是我对css并不熟悉。

Answer 1

谢谢你们。我学到了很多东西。但我自己找到了原因。
移动设备上的浏览器将自动缩放页面以适应移动屏幕。我只是将这一行添加到 html 中，它可以工作：

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

Answer 2

您可以使用类似@media handheld and (max-width: 500px). 但不幸的是，我认为没有办法像使用 CSS

fontSize *（我的笔记本电脑的每像素宽度）/（该设备的每像素宽度）

Answer 3

到目前为止我们只知道一种方法，你需要做这样的事情

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

好吧，您可以做一件事，您可能希望以 pt 单位设置字体大小(1pt = 1/72 inch)，这些单位与分辨率无关，并且设计为在任何分辨率下看起来都具有相同的外观大小。

Answer 4

尝试添加以下代码

body{
    -webkit-text-size-adjust: none;
}