根据Android Chrome上的字体大小调整图像大小
Rah*_*ahn 6 html javascript css cross-platform google-chrome
我正在根据字体大小调整图像大小，以根据文本大小更改图像大小，但是结果与macOS和Android（两者均与Chrome相比）截然不同。
在桌面版Chrome上：
在Android的Chrome上：
您可以看到，与文本相比，Android上的图像要小得多。如何解决，使图片比Android上的文字大2.5？
看起来像GitHub页面有问题吗？
https://s999inf.github.io/imagezoom/
https://github.com/s999inf/imagezoom/blob/master/index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.logos > img {
display: inline-block;
height: 100vh;
max-height: 5em;
}
.test-logos {
display: inline-block;
}
.test-logos__img-2em {
height: 2em;
}
.test-logos__img-3em {
height: 3em;
}
.test-logos__img-5em {
height: 5em;
}
</style>
</head>
<body>
copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text
copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text
copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text
<div class="test-logos">
<img class="test-logos__img-2em" src="https://via.placeholder.com/16x16">
<img class="test-logos__img-3em" src="https://via.placeholder.com/16x16">
<img class="test-logos__img-5em" src="https://via.placeholder.com/16x16">
</div>
<div class="logos">
<img src="https://via.placeholder.com/16x16">
<img src="https://via.placeholder.com/16x16">
<img src="https://via.placeholder.com/16x16">
</div>
</body>
</html>
根据chrome的行为，body的宽度会改变，直到屏幕980px。如果你的屏幕低于979px。Body的宽度固定在980px。所以，图像的尺寸不会改变，因为em单位是基于父计算的。当屏幕较小时，图像尺寸会变小.如果你想看到正常的宽度，你需要放入
<meta name="viewport" content="width=device-width, initial-scale=1">head标签。
已编辑
我认为Font size的行为与 Chrome 中其他宽度的行为不同。