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"/>

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

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.

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

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% ​​