How to solve the discrepancy of font size between PC and mobile web pages?

typesetting on the computer is full of pages, on the mobile phone, the font has become smaller, there is a lot of white space below.
css attribute font-size:12px;

how can I make the text on my computer and on my phone the same size?

page header has been added:
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
White DIV is fixed PX value;
and then according to the screen size, dynamically calculated transform: scale (0.741538);
page is automatically zoomed to just the right screen display.
after testing, it has nothing to do with transform scaling, has nothing to do with viewport, and font-size:1em will become smaller. At present, I still don"t know where the reason is, the font will be smaller.

Mar.09,2021

it seems that the screenshot does not write viewport (so what you see is the effect of the whole page shrinking, of course, the word will be smaller), you'd better write it down, and then do responsive processing as appropriate (retypesetting, including handling layout, zooming and DPR responses, etc.).

< hr >

then take a look at the device DPR. The value of window.devicePixelRatio under log


< head > < / head > add the following:

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

fixed width and transform: scale problems.
Mobile can directly use the media to query the adaptation, and the transform: scale you use affects the font at the same time.


turns out to be caused by different fonts of . This text does not specify a font, the default on the computer is Microsoft Yahei, but the default on the phone is not Microsoft Yahei, there are slight differences and errors.

Menu