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

Question

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

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

问题是我想要 相同大小的文本 在主要 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 是一致的，但我 phone 上的三星和 Chrome 浏览器不是。截图来自三星浏览器，Chrome结果类似

Answer 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" />

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

How to get the same sized font when rotated?

android

html

css

font-size