移动设备和台式机上的字体大小

Question

我正在尝试让网页在台式机和移动设备上显示合理的字体大小。

我正在测试Pixel 3的像素，该像素与桌面一样多。

我已经设置：

font-size: 16px; 

当我将页面加载到单元格上时，字体很小。我的

@media screen and (max-width: 800px)

不反应。我认为这是因为Pixel 3的显示屏很大。

我尝试设置：

<meta name="viewport" content="width=device-width">

然后使用font-size：1vh。这似乎也不起作用。对不起，菜鸟问题。其他文章通常建议使用@media，但据我所知，较新的单元格具有大屏幕，以至于@media无法与像素数学一起很好地工作。

底线：一个简单合理的HTML5 / CSS3页面看上去在台式机和移动设备上具有可读的字体大小是什么？

Answer 1

@media应该可以正常工作。但是，您可以执行以下操作：

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

根据需要更改“初始比例= 1.0，最大比例= 1.0”的值。希望对您有所帮助。

或者类似这样的东西：

@media only screen and (max-width: 980px) {
your style
}

@media only screen and (min-width: 981px) {
your style
}