移动相比，桌面上的字体大小差异

Question

即时通讯创建一个网站使用HTML和CSS，但我只是想知道是否有人知道所有平台上的文字大小之间的差异。

如果我在桌面上创建20px的字体大小，在移动设备上看起来会非常小，并且您无法读取它，因此字体大小通常在移动设备上更大？

Answer 1

你说得对。 查看EM（元素单位）和REM（相对元素单位）的大小调整元素。还添加以下代码到你的头可能会解决你的问题：

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

Answer 2

没有正确的meta标签，yes文本将是超级小。

...字体大小通常在移动设备上更大？

不，通常不。因为，大多数提供响应式版本的网站都不会告诉他们的网页是80px（或其他），所以文本并不是很小。

移动设备具有所谓的设备宽度。这个设备宽度通常每个CSS像素包含多个设备像素。我有一个三星Galaxy S6，其设备像素与CSS像素比例为4：1。这意味着每个CSS像素有4个设备像素。此设备的分辨率（设备像素）为1440 x 2560，但CSS像素分辨率为360 x 640.

在桌面计算机上开发网站时，如果您指定的元素宽度为100像素，则实际上使用CSS像素。您可能认为它是一个设备像素（就像我曾经做过的那样），因为几乎所有台式机显示器的设备像素与CSS像素比例均为1：1。

当使用响应式元标记（如下图所示），并且您将元素指定为300px宽时，它将占用大部分屏幕宽度，因为该元素将绘制在360 CSS像素宽的画布上，而不是1440设备像素宽的画布（这是没有适当的meta标签时发生的情况，并给出了在移动设备上缩小为“”的网站的外观）。

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

帮助链接：

• Quirks Mode, A pixel is not a pixel is not a pixel
• WebPlatform Docs, Understanding CSS Units
• mydevice.io - 显示当前装置设定。
• mydevice.io/devices

希望一切都有道理，我试图保持它“简单”。