移动设备上的字体大小大众越野车 Chrome
Font-sizing vw buggy on mobile Chrome
我正在开发一个网站，其中 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>
执行此操作后，您会看到浏览器之间以及从一个页面到另一个页面的行为更加一致。
More about the viewport meta tag
希望对您有所帮助！
字体大小的差异可能是移动 Chrome 字体增强。具有动态高度的元素会自动提升。一个解决方案是给元素或父元素一个最大高度：
.parent {
max-height: 999999px;
}
但最好将该最大高度直接应用于包含文本的元素，这样它就不会影响您可能在布局中执行的任何其他操作。
在真实设备上测试它，因为 Chrome 的开发工具没有显示提升。
我正在开发一个网站，其中 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>
执行此操作后，您会看到浏览器之间以及从一个页面到另一个页面的行为更加一致。
More about the viewport meta tag
希望对您有所帮助！
字体大小的差异可能是移动 Chrome 字体增强。具有动态高度的元素会自动提升。一个解决方案是给元素或父元素一个最大高度：
.parent {
max-height: 999999px;
}
但最好将该最大高度直接应用于包含文本的元素，这样它就不会影响您可能在布局中执行的任何其他操作。 在真实设备上测试它，因为 Chrome 的开发工具没有显示提升。