为啥我的应用在高分辨率 Android 手机上看起来更小？

Posted 2023-03-07

【中文标题】为啥我的应用在高分辨率 Android 手机上看起来更小？

【英文标题】：Why does my app look smaller on High Resolution Android phones?为什么我的应用在高分辨率 Android 手机上看起来更小？

【发布时间】：2013-11-15 21:04:24

【问题描述】：

我使用 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 设备。

【参考方案1】：

在你的head 中添加这个meta 标签：

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

【参考方案2】：

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

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

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

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

【讨论】：

这个解决方案拯救了我的培根......甜。在我发现这个之前花了几个小时敲墙。