时间戳

首页 > 解决方案 > 旋转时如何获得相同大小的字体？

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

问题描述

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

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

问题出在哪里，无论设备的朝向如何，我都希望主要的文本大小相同div，但是浏览器对字体大小有自己的想法。我试图用vh和vmax和em等来缩放字体px无济于事。

我尝试的一种解决方案是在从纵向旋转到横向时的字体大小问题中给出，但它并没有解决它，即使我在旋转后刷新页面也是如此。

在此处输入图像描述

这个简单的例子和​​图片展示了我的意思，只是一个字体大小的演示。如果我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 也有类似的结果。

标签： androidhtmlcssfont-size

解决方案

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

<!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>

至于解决方案，添加视口元标记将是最简单的：

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

推荐阅读