为什么我的应用在高分辨率安卓手机上看起来更小

Question

我使用Adobe的Phone Gap开发了一个应用程序，主要是在移动Safari，Desktop Firefox和Desktop 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

在head中添加此meta标签：

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

Answer 2

根据Mike Stamm在CSSConf上的演讲，问题实际上出在Android使用的元视口标签中的目标密度dpi属性中，但Apple忽略了。它应该是：

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

显然，这解决了大多数Android设备的问题（尽管某些Android设备需要目标密度dpi = 140）。

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