为什么我的应用程序在高分辨率 Android 手机上看起来较小？

Question

我使用 Adob​​e 的 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

根据通过mike stamm在cssconf中的talk，问题实际上是在中Meta ViewPort标记中的Target-densyDPI 属性，其中Android使用，但Apple忽略了。它应该是：

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

.

显然可以解决大多数Android设备的问题（尽管某些Android设备需要 target-denysdpi= 140 ）。

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

Answer 2

添加这个 meta 标签在你的 head:

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