2K 和更高分辨率设备上的字体大小

font-size on 2K and higher resolution devices

我的屏幕分辨率为 1680 x 1050

我是一名 Web 开发人员,在构建网站时,我们使用 font-sizes,在笔记本电脑上易于阅读,分辨率介于 1366 x 7681920 x 1080 之间。

在使用 Chrome 开发者工具 时,我选择了 Amazon Kindle Fire HDX,其分辨率为 2560 x 1600 .在此设备上(chrome 正在模拟),由于高分辨率,字体大小呈现得非常小。我尝试了许多字体大小单位,例如 vw, vh, %,以便字体大小在所有分辨率下都显示相同但失败了。

我什至使用 Chrom Dev Tool 打开 Whosebug,发现字体太小了。我不知道真正的 Kindle HDX 上显示的字体大小是否与我在 chrome 模拟的 Kindle HDX 上看到的相同,我没有真正的 2K 分辨率设备来测试我的网站也是如此。如何应对这个问题?我希望我的网站在所有分辨率下都可读。

我建议您使用 em 作为字体单位,使其更 cross-browser/device 兼容。 em 应该根据浏览器自己的内置字体大小工作,使内容更具可读性以及浏览器的缩放设置。

此外,您可能想尝试各种 CSS 框架,这些框架可能会尝试处理更一致的 cross-browser/device 一致性,以便根据 device/dpi 设置使字体保持更大的相对大小。 (不幸的是,我没有遇到过这种情况,但应该是开始研究的好地方)。

如果您的字体大小采用相对单位,那么您可能就没问题。

我认为您在 Chrome 开发工具中看到的是 "Zoom to fit" 功能,它将缩放目标设备的页面以适应 您的浏览器window。取消选中 "Zoom to fit",我想您会看到文字清晰可辨。请注意,标尺值也会更改为更准确的表示。

您可以在此屏幕截图中看到标尺指示设备模拟正在以 1600 像素宽呈现,即使此屏幕截图绝对不是以 1600 像素宽拍摄的。它被缩放以适合我的 window.