在移动 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声明为例:
页脚地址div {显示:块；字体大小:3vw ！重要；}该声明也出现在两个浏览器的开发工具中，因此它在 Firefox 和 Chrome 上都可以呈现，但显然它们以不同的方式解释它.
正如我上面所说，我的移动设备 CSS 与桌面设备不同，因此要检查它，您应该使用浏览器开发工具中的移动设备模拟(对于 Chrome，请参阅 https://developers.google.com/web/tools/chrome-devtools/device-mode/ )
我认为问题的根源在于您的任一页面的头部都没有视口元标记.如果没有这个，浏览器的默认行为是缩放页面以适应屏幕.
首先在所有页面的头部添加视口标签:
<头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>此处为标题</title>...执行此操作后，您会看到浏览器之间以及从一个页面到另一个页面的行为更加一致.
希望这会有所帮助！
I am developing a website with slightly different CSS code for desktop and mobile. On mobile I use vw units for responsive font-sizes, which is preferred over media queries as mobile screen sizes change every other year and a different approach would require me to update the media queries as well every time.
Now, I think I have found buggy behaviour in Chrome mobile when it comes to font sizes with vw.
I kindly invite you to check out these two pages on mobile, both with Firefox and Chrome: http://gusto-gelateria.al/
http://gusto-gelateria.al/ice-cream-recipes/
Firefox is correctly showing the font-sizes as i expected, while on Chrome:
font sizes are wrong throughout the page
the font size in the footer on the first page is different than on the second page ( footer fonts are the same on both pages on Firefox, as expected )
Am I missing something here, or Chrome doesn't handle well vw?
If this is not an obvious coding error I did, I may file a bug, but I want a confirmation before doing it.
Take as an example this vw declaration for the footer:
footer address div {
display: block;
font-size: 3vw !important;
}
That declaration appears in both browsers' dev tools as well, so it is being rendered both on Firefox and Chrome, but apparently they interpret it in different ways.
As I said above, my CSS for mobile is different than on desktop, so for inspecting it you should use the mobile device emulation from the browser dev tools (for Chrome see https://developers.google.com/web/tools/chrome-devtools/device-mode/ )
I believe that the root of your problem is that you don't have a viewport meta tag in the head of either of your pages. Without this, the default behaviour of browsers is to scale the page to fit the screen.
Start by adding the viewport tag in the head of all your pages:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title here</title>
...
</head>
Once you do this you'll see more consistent behavior between browsers, and from one page to another.
More about the viewport meta tag
Hope this helps!
这篇关于在移动 Chrome 上调整字体大小的大众马车的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
