为什么我的应用程序在高分辨率 Android 手机上看起来较小?
-
20-12-2019 - |
题
我使用 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 设备。
解决方案 2
根据通过mike stamm在cssconf中的talk,问题实际上是在中Meta ViewPort标记中的Target-densyDPI 属性,其中Android使用,但Apple忽略了。它应该是:
<meta name="viewport" content="target-densitydpi=160">
.
显然可以解决大多数Android设备的问题(尽管某些Android设备需要 target-denysdpi= 140 )。
其他提示
添加这个 meta
标签在你的 head
:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
不隶属于 StackOverflow