モバイル デバイスの解像度は 480*800 ですが、ディスプレイ サイズは 320 です。 互換性の問題_html/css_WEB-ITnose

プロジェクト: アプリクライアント組み込みブラウザのネストされたページ
環境: Android Webview 組み込みブラウザ、デバイス解像度 480*800

ページ上のすべての要素の高さ、幅、マージン、およびフォント サイズの単位はレムであり、すべてHTML のフォント サイズによって計算されたページの

<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 コード:

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

問題: 幅と高さが正しく計算されず、インターフェイスの位置がずれる原因となります。というのも、Android の組み込み Web ビューの最小フォント サイズは 8px までしか設定できないようで、私の 320 で表示されるフォント サイズは 7px なので、インターフェースに問題があります。
PS: html{-webkit-text-size-adjust:none;} を試してみましたが、この方法は機能しません
PS2: font-size:44.4444% は 720 解像度に基づいて計算されます font-size:100% (320 / 720 = 44.4444%)

ディスカッションへの返信 (解決策)

モバイル端末でフォント サイズを設定するのにパーセンテージを使用する場合は、次のことを理解してください

携帯端末のフォントサイズについては、 em

em: 親との相対

モバイル端末の font-size をパーセンテージで設定する場合は、em を理解してください

em: 親との相対parent
rem (ルート要素): 相対的なルートの親
rem を使った方が便利ではないでしょうか

720 幅は 100% 表示
480 幅は 44% 表示

実用的な観点からは、すべて 100% 表示する必要があります部屋が小さくなったからといって、スツールが小さくなるわけではありません

ビジネスロジックからすると、webkit-transform-scale の CSS スケーリングを使用する方が良いでしょう

ご回答いただきありがとうございます。一時的に解決しました。
解決策: 640 を 100% として、320 は 50%、つまり 8 ピクセル、720 は 112.5% です