我有一个 Phonegap 应用程序，旨在在 Android 手机和平板电脑上运行。文本和图像的比例在手机上看起来不错，但在 7 英寸平板电脑上看起来太小。
有没有办法为基于 Phonegap 的应用程序设置不同屏幕尺寸/密度的比例？对于本机 Android 应用程序，多个屏幕布局（如安卓文档 http://developer.android.com/guide/practices/screens_support.html）将是一个解决方案，但这可以用于基于 Phonegap 的应用程序吗？
我可以使用 CSS 媒体查询根据屏幕尺寸设置字体大小，但我想按比例缩放整个界面（包括图像）。
我尝试使用CSSzoom属性以及媒体查询来定位特定的屏幕尺寸，但这会搞乱绝对定位并干扰 UI 元素（例如 iScroll）的功能：
@media only screen and (min-device-width : 768px) {
body{
zoom: 125%;
}
}
@media only screen and (min-device-width : 1024px){
body{
zoom: 150%;
}
}
我也尝试使用targetdensity-dpi元视口属性 - 将其调整为 120dpi 可以使 7 英寸平板电脑上的比例更好，但在手机上太大。由于这是在 HTML 中而不是 CSS 中硬编码的，因此不能使用媒体查询根据屏幕尺寸来改变它：
<meta name="viewport"
content="width=device-width, initial-scale=1, targetdensity-dpi=120dpi">
以下是测试用例 Phonegap 应用程序的一些屏幕截图：
- HTC HD2，目标密度=默认 http://www.dumpt.com/img/viewer.php?file=os9gjxbj8205ujk6l6t0.png
- HTC HD2，目标密度=120dpi http://www.dumpt.com/img/viewer.php?file=x07nmfcpdfycbnb3i4py.png
- Nexus 7，目标密度=默认 http://www.dumpt.com/img/viewer.php?file=m39973lxitom0aog3y1e.png
- Nexus 7，目标密度=120dpi http://www.dumpt.com/img/viewer.php?file=j2rc5cefiiapp0fjp3sc.png
在我们放弃phonegap之前，让我们尝试改进它。
我被困住了，直到我使用这个解决方案解决了它。
将您的视口更改为：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
Ref : Phonegap 应用程序文本和布局太小 https://stackoverflow.com/questions/15194940/phonegap-application-text-and-layout-too-small/15545381#15545381
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
