H5 page mobile debugging font size problem?

the design drawing of UI is 750px, but the text size is 14px; according to the front end, the size of html is set to 20px; then the conversion to rem is 14 / 40rem = 0.35rem.
but in the size of Google browser, it is not 14px, but greater than 14px. how should this situation be solved?

Nov.02,2021

Why should 40 be divided by 20 when 14px is converted into rem?


the 750px of the design given by UI, that is, the design of 2x,
1. You need to confirm with UI that the font is also magnified 2 times, that is, his original intention is 14px or 7px. if the font is not enlarged although he is given 2x in the design, according to you, change it to rem,14 / 20rem = 0.7rem. then Google browser shows no problem
2. If you confirm with UI that the font is indeed enlarged, that is, his original intention is 7px (I think this is unlikely, because the font on the page is generally above 10px), there must be a problem with the browser display, even if you set 0.35rem. the browser will also display its own default minimum font size, so Google shows that it is greater than 14px. at this time, there is a solution is to use transform to reduce the scale.
the following example is a button that displays a copy size of 7px

  

the browser displays a minimum font size of 12px, and for the root element 20px, 0.35rem is 7px, so the browser displays the size 12px by default. How can it be bigger than 14px.

Menu