Question

我使用几个输入按钮对html进行练习：
http://bullmalay.appspot.com/
我在手机上访问它。但我发现文字大小非常小。我认为原因在于解决问题任何人都可以帮我解决文字大小问题吗？我想它可以在我的笔记本电脑中显示相似的尺寸
PS。
我搜索过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%; }
}

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

Answer 4

尝试添加以下代码

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

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

4 个答案: