旋转时如何获得相同大小的字体？答案

【问题标题】：How to get the same sized font when rotated?旋转时如何获得相同大小的字体？
【发布时间】：2021-07-31 18:12:51
【问题描述】：

我有一个相当简单的问题，已经写了很多，但我没有找到答案。

基本上我在两个主要的div 部分中有一个布局，其中一个使用了大约三分之一的视口。我在旋转时重新组织它们，使较小的仍然在一端（并且大小大致相同），这很好——我使用@media 查询和vh 和vw 设置大小和位置。

问题出在我希望在主div 中相同大小的文本，无论设备朝向哪种方式，但浏览器对字体大小有自己的想法。我尝试使用vh 和vmax 和em 和px 等来缩放字体，但无济于事。

Font-sizing issue when rotate from portrait to landscape 中给出了我尝试的一个解决方案，但它并没有解决它，即使我在旋转后刷新页面。

这个简单的例子和图片展示了我的意思，只是一个字体大小的演示。如果我将大小基于vmax，则会获得类似的结果。我没有在我的实际代码中使用这样的 Javascript，它只是显示一些具有屏幕大小的文本。

<!DOCTYPE html>
<html>
<style>
body { font-size: 40px !important; }
</style>

<body>
<script language="JavaScript">
document.writeln("<BR>");
document.writeln("screen = ");
document.writeln(screen.width);
document.writeln(" x ");
document.writeln(screen.height);
document.writeln("<BR>");
</script>

</body></html>

我在较小的区域中有一些按钮，并且（奇怪的是）在它们上调整文本大小没有问题。

如何实现相同大小的字体，而不必事后猜测（未知）浏览器会做什么？我的台式电脑上的 Firefox 是一致的，但我手机上的三星和 Chrome 浏览器不是。屏幕截图来自三星浏览器，Chrome 也有类似的结果。

【问题讨论】：

标签： android html css font-size

【解决方案1】：

改变的不是你的字体大小，而是页面缩放。要验证，请在您的页面中引入图像或简单的像素大小的正方形：

<!DOCTYPE html>
<html>
<style>
body { font-size: 40px !important; }
</style>

<body>
<span style="display:inline-block;width:40px;height:40px;background:red"></span>
<script language="JavaScript">
document.writeln("<BR>");
document.writeln("screen = ");
document.writeln(screen.width);
document.writeln(" x ");
document.writeln(screen.height);
document.writeln("<BR>");
</script>

</body></html>

至于解决方案，添加viewport meta tag 是最简单的：

<meta name="viewport" content="width=device-width" />

【讨论】：

啊，是的！我最初确实有视口meta 标签，但不知何故，它在我没有注意到的情况下在摆弄和深夜会话中丢失了。已经解决了，谢谢。