手机和桌面字体大小的区别

Posted 2023-03-12

【中文标题】手机和桌面字体大小的区别

【英文标题】：Difference between font size on mobile compared to desktop

【发布时间】：2017-03-08 21:49:17

【问题描述】：

我正在使用 html 和 css 创建一个网站，但我只是想知道是否有人知道所有平台上文本大小之间的区别。

如果我在桌面上创建一个 20px 的字体大小，在移动设备上看起来非常小并且您无法阅读，那么在移动设备上字体大小通常会更大吗？

【参考方案1】：

如果没有正确的meta 标签，是的，文本会非常小。

...移动设备上的字体通常更大吗？

不，通常不会。例如，大多数提供响应式版本的网站不会告诉他们的 font-size 为 80 像素（或其他），因此文本不是超级小。

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

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

当使用响应式元标记（如下所示）时，如果您将元素设为 300 像素宽，它将占据屏幕的大部分宽度，因为该元素将绘制在 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

希望一切都有意义，我尽量保持“简单”。

【参考方案2】：

你是对的。 查看 EM（元素单位）和 REM（相对元素单位）来确定元素大小。此外，将以下代码添加到您的标题可能会解决您的问题：

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