css - 移动端页面字体不清晰

Question

我用的js判断

在谷歌手机模式就显示成这样
我用的px单位

Answer 1

Due to the difference in scale, the page has been scaled. For example, if the scale is 0.5, it will be reduced by twice.
If you check it on a real device with a dpr of 2, you will find that it is not blurry.
The reason why it looks blurry on chrome is because the dpr obtained by js is 2, and then it is reduced by two times, but on your computer The screen dpr is only 1

Answer 2

If it involves mobile high-definition screens, it is better to use real devices for testing

Answer 3

The minimum font limit of Google Chrome is that the minimum font is 12px, so it will not be clear. It is recommended to use Firefox for mobile debugging!