为什么我的应用在高分辨率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

在meta：

中添加此head标记

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

Answer 2

根据a talk by Mike Stamm at CSSConf，问题实际上是Android使用的元视口标记中的 target-densitydpi 属性，但Apple忽略了。它应该是：

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

显然，这解决了大多数Android设备的问题，（虽然有些Android设备需要 target-densitydpi = 140 ）。

相关：上面链接的视频在iOS和Android显示器的差异背后有一些有趣的历史原因。