移动Chrome浏览器

Question

我正在开发一个与桌面和移动设备略有不同的CSS代码的网站。在移动设备上，我使用vw单位作为响应式字体大小，这比媒体查询更受欢迎，因为移动屏幕尺寸每隔一年就会发生变化，而且每次都需要我更新媒体查询。

现在，我认为在使用vw的字体大小时，我在Chrome移动设备中发现了错误行为。

我恳请您在手机上查看这两个页面，包括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;
}

该声明出现在两个浏览器中＆＃39;开发工具也是如此，所以它在Firefox和Chrome上呈现，但显然他们以不同的方式解释它。

如上所述，我的移动设备CSS与桌面设备不同，因此要检查它，您应该使用浏览器开发工具中的移动设备模拟（对于Chrome，请参阅https://developers.google.com/web/tools/chrome-devtools/device-mode/）

Answer 1

字体大小的差异可能是Mobile Chrome字体增强功能。具有动态高度的元素会自动提升。一种解决方案是为元素或父元素赋予最大高度：

.parent {
    max-height: 999999px;
}

但是最好将max-height直接应用到包含文本的元素上，这样就不会影响您可能在布局中所做的任何事情。 由于Chrome的开发工具未显示增强功能，因此请在真实设备上进行测试。