在每个移动设备上获得正确的字体大小

Question

在我的移动应用程序中,我使用了一些大字体,例如:

<b style="font-size:100px; font-family:Segoe UI">text</b>

当我在手机上测试它看起来很棒但是在较小的手机上它仍然是相同的尺寸而且太大了.

我应该使用什么css设置才能在每部手机上获得相同的尺寸？

Answer 1

媒体查询无效.是的,您可以根据屏幕尺寸(这是像素​​大小而不是物理尺寸)具有不同的字体大小,因此在具有相同物理尺寸屏幕但具有不同像素密度的两个设备上它们的大小不同.您的目标是在所有具有相同物理屏幕尺寸的设备上使文本具有相同的物理尺寸,而不管像素密度如何.

如今手机适用于手掌大小屏幕的超高清分辨率,而老款手机的像素密度要低得多.

直到最近才解决这个问题.最近CSS3增加了对他们所谓的"Viewport Sized Typography"的支持.它允许您设置相对于物理屏幕大小的事物的大小.这里解释一下.

Answer 2

在设备上使用具有相同/相似大小的文本是合乎需要的,并且默认情况下不会这样.这不是因为较小的设备具有更少或更小的物理像素,而是由于在这些设备上发生的缩放,以便不破坏主要为较大的桌面屏幕设计的页面.

例如,iPhone 5具有1136x640物理像素,但使用chrome的开发人员工具的设备工具栏,您可能会看到一些元素看起来比那些大得多(比如1300x900).这是因为默认情况下浏览器应用的缩小比例缩放.在这种情况下,CSS像素大小将变得远小于实际像素大小.想象一下,在智能手机中看到一个桌面尺寸的页面,要小得多.

如果您不希望发生这种情况,您需要明确告诉浏览器不要弄乱缩放(在页面标题中):

    <meta name="viewport" content="width=device-width, initial-scale=1">

如果您看到设备上的文字同样大,那么您可能会有类似的东西,只需将其删除即可在智能手机上看到它更小.

Answer 3

您应该使用媒体查询来获取不同的设备宽度.

@media only screen and (max-width: 768px) {
  b {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  b {
    font-size: 10px;
  }
}

等等...