我正在开发一个网站，其桌面和移动设备的CSS代码略有不同。在移动设备上，我使用vw单位作为响应式字体大小，这比媒体查询更受欢迎，因为移动屏幕大小每隔一年就会发生变化，并且不同的方法要求我每次都更新媒体查询。
现在，我想我已经在Chrome手机中发现了错误的行为，当涉及到vw字体大小时。
我恳请您在移动设备上查看这两个页面，包括Firefox和Chrome： http://gusto-gelateria.al/
http://gusto-gelateria.al/ice-cream-recipes/
Firefox 在 Chrome 上正确显示了我预期的字体大小：
-
整个页面的字体大小错误
第一页页脚 中的字体大小与第二页不同(正如预期的那样，Firefox 上两个页面上的页脚字体相同)
我在这里错过了什么，或者 Chrome 不能很好地处理大众？
如果这不是我做的明显的编码错误，我可能会提交一个错误，但我希望在这样做之前进行确认。
以页脚的vw声明为例：
footer address div {
display: block;
font-size: 3vw !important;
}
该声明也出现在两个浏览器的开发工具中，因此它在Firefox和Chrome上都呈现，但显然他们以不同的方式解释它。
正如我上面所说，我的移动 CSS 与桌面不同，因此要检查它，您应该使用浏览器开发工具中的移动设备仿真(对于 Chrome，请参阅 https://developers.google.com/web/tools/chrome-devtools/device-mode/)
我相信您问题的根源是您两个页面的头部都没有视口元标记。如果没有这个，浏览器的默认行为是缩放页面以适应屏幕。
首先在所有页面的头部添加视口标签：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title here</title>
...
</head>
完成此操作后，您将看到浏览器之间以及从一个页面到另一个页面的行为更加一致。
有关视区元标记的更多信息
希望这有帮助！
字体大小的差异可能是移动Chrome字体提升。具有动态高度的元素会自动提升。解决方案是给元素或父元素一个最大高度：
.parent {
max-height: 999999px;
}
但最好将该最大高度直接应用于包含文本的元素，这样它不会影响您在布局中可能执行的任何其他操作。 在真实设备上进行测试，因为Chrome的开发工具没有显示提升。