2K及更高分辨率设备上的字体大小(font

2K及更高分辨率设备上的字体大小(font-size on 2K and higher resolution devices)

我有一个分辨率为1680 x 1050的屏幕。

我是一名网络开发人员，在构建网站时，我们使用的font-sizes在笔记本电脑上易于阅读，分辨率介于1366 x 768到1920 x 1080 。

使用Chrome开发者工具时 ，我选择了分辨率为2560 x 1600 亚马逊Kindle Fire HDX 。 在此设备上（Chrome正在模拟），由于高分辨率，字体大小呈现非常小。 我尝试了很多字体大小的单位，如vw, vh, %以便字体大小在所有分辨率上显示相同但失败。

我甚至使用Chrom Dev Tool打开了StackOverflow，看到字体大小看起来太小了。 我不知道真正的Kindle HDX上出现的字体大小是否与我在Chrome上模拟的Kindle HDX上看到的相同，我也没有真正的2K res设备来测试我的网站。 如何解决这个问题？ 我希望我的网站在所有分辨率上都可读。

I have a screen with resolution 1680 x 1050.

I work as a web developer and while building websites, we use font-sizes that are easily readable on laptops with resolutions ranging between 1366 x 768 to 1920 x 1080.

While using Chrome developer tools, I chose Amazon Kindle Fire HDX which has resolution of 2560 x 1600. On this device (which chrome is simulating), the font-size renders very small due to high-res. I tried many font-size units such as vw, vh, % so that the font-size appears same on all resolutions but failed.

I even opened StackOverflow using Chrom Dev Tool and saw the font-size appearing to be too small. I don't know if the font size that appears on the real Kindle HDX is the same as what I'm seeing on Kindle HDX that chrome is simulating and I don't have a real 2K res device to test my websites as well. How to counter this issue? I want my websites to be readable on all resolutions.

最满意答案

如果你的字体大小是相对单位，那么你可能很好。

我认为您在Chrome开发工具中看到的是“缩放以适应”功能，该功能将缩放目标设备的页面以适合您的浏览器窗口 。 取消选中“缩放以适应”，我认为您会看到文字清晰可辨。 并注意标尺值将更改为更准确的表示。

您可以在此屏幕截图中看到，标尺表示设备模拟的渲染宽度为1600px，即使此截图绝对不是以1600px宽度拍摄的。 它被缩放到适合我的窗口。

If your font sizes are in relative units then you are likely just fine.

I think what you are seeing in Chrome Dev Tools is the "Zoom to fit" feature that will zoom the page of the targeted device to fit your browser window. Uncheck "Zoom to fit" and I think you will see the text is legible. And take notice that the ruler values will change to be more accurate representation as well.

You can see in this screenshot that the rulers indicate that the device simulation is being rendered at 1600px wide even though this screenshot was definitely not taken at 1600px wide. It was zoomed to fit my window.