The mobile device resolution is 480*800, but the display size is 320 compatibility issues_html/css_WEB-ITnose

Project: app client built-in browser nested page
Environment: Android webview built-in browser, device resolution 480*800

Height, width, margins, and font size of all elements on the page The units are all in rem, and all are calculated through the font-size of html. The page has

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"/>

css code:

@media only screen and (min-device-width:361px) and (max-device-width:480px){	html{font-size:44.4444%;}	.viewport{max-width:480px;}}

Problem: The width and height are calculated incorrectly, causing the interface to be misaligned. Because it seems that the minimum font size of Android's built-in webview can only be set to 8px, and the font size displayed by my 320 is 7px, so there is a problem with the interface.
PS: I have tried html{-webkit-text-size-adjust:none;} but this method does not work
PS2: font-size:44.4444% is calculated based on 720 resolution font-size:100% (320 / 720 = 44.4444%)

Reply to discussion (solution)

If you use percentage to set font-size on mobile, Please understand em.

If you use percentage to set font-size on the mobile terminal, please understand em.

em: relative parent

If you use percentage to set font-size on mobile, please understand em.

em: relative parent
rem( root element): Isn’t it more convenient to use rem relative to the root parent

720 width displays 100%
480 width displays 44%

From a practical point of view, it should all display 100% The stool cannot become smaller just because the room becomes smaller

From your business logic, it will be better if you use the css scaling of webkit-transform-scale

Thank you both The problem is temporarily solved.
Solution: Take 640 as 100%, so 320 is 50%, that is, 8px, and 720 is 112.5% ​​