高解像度の Android スマートフォンではアプリが小さく見えるのはなぜですか?

Question

Adobe の Phone Gap を使用してアプリを開発し、主にモバイル Safari、デスクトップ Firefox、デスクトップ Chrome でチェックしましたが、Android 高解像度デバイス (HRD) でチェックすると、すべてのフォントと測定値 (REM で計算) が半分の大きさになりました。 。

これを次のように修正してみました。

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution:2dppx){
    html{
        /*font-size:125%;*/
    }
}

...しかし、Android の HRD は普通に見えるようになりましたが、iOS の HRD デバイスは過度に大きく見えるようになりました。この不一致を修正する最善の方法は何でしょうか?Android 固有のメディア クエリを調べましたが、20 個ほどのメディア クエリを追加することになり、特に Android デバイスに影響を与えるという保証はありません。

Answer 1

CSSCONFでのマイクスタッカによるトークに準拠している。Androidが使用するMeta ViewPortタグ内のtarget-densitydpi 属性は、Appleは無視します。それは以下のべきです：

<meta name="viewport" content="target-densitydpi=160">

.

ほとんどのAndroidデバイスで問題を解決する（いくつかのAndroidデバイスが getall-densitaldpi= 140）。

関連：上記のビデオは、iOSとAndroidディスプレイの違いの背後にあるいくつかの興味深い歴史的な理由があります。

Answer 2

これを追加 meta あなたのタグ head:

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