Android PhoneGap应用不会调整内容,例如等效的Chrome /浏览器页面

Question

我使用HTML5,Javascript和许多SVG图形创建了一个网页.它在我的Android平板电脑上的原生Android浏览器和最新的Chrome浏览器上运行良好.

我已将我的应用程序包装在PhoneGap中并将其部署在模拟器中.一切都好.然后我将它部署在平板电脑上.我没有得到相同的结果.

当我的META标签包含"target-densitydpi ="device-dpi"时,我的SVG图形会像在浏览器中一样大,但文本大小只有一半.

我被告知target-densitydpi已被弃用,所以我想弄清楚如何做到这一点.

我有这个activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

而这个META:

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" />

在我的window.onload()中,我执行计算来调整SVG图形的大小:

var minWindowDim = Math.min(window.screen.availWidth, window.screen.availHeight)
var maxWindowDim = Math.max(window.screen.availWidth, window.screen.availHeight)
var minEffectiveDim = Math.min(minWindowDim, (maxWindowDim / 1.5));
var minDim = minEffectiveDim * AVID.avidSizeFactor;

var avidWrapper = document.getElementById("avidWrapper");
avidWrapper.setAttribute("height", minDim);
avidWrapper.setAttribute("width", minDim);

avidWrapper是一个名义上为318像素的SVG.这就是为什么高度和宽度设置相同.

我发出一些警告告诉我发生了什么事.

在桌面Chrome浏览器中:

window.screen.availWidth: 1600
window.screen.availHeight: 860
minWindowDim: 860
maxWindowDim: 1600
minEffectiveDim: 860
minDim: 817   // This is 95% of minEffectiveDim.
avidWrapper.clientWidth: 318

然后我将宽度和高度从318调整到817,我很高兴.

在平板电脑上的Chrome中:

window.screen.availWidth: 601
window.screen.availHeight: 906
minWindowDim: 601
maxWindowDim: 906
minEffectiveDim: 601
minDim: 570.95   // This is 95% of minEffectiveDim.
avidWrapper.clientWidth: 318

作为平板电脑上的PhoneGap应用:

window.screen.availWidth: 800
window.screen.availHeight: 1206
minWindowDim: 800
maxWindowDim: 1206
minEffectiveDim: 800
minDim: 760.95   // This is 95% of minEffectiveDim.
avidWrapper.clientWidth: 318

扩展后,avidWrapper扩展到设备的边界之外,需要滚动才能看到所有内容.

计算的目的是约束事物.PhoneGap看到的数字是(800/600 =)1.33,Chrome看到的数字.我在PhoneGap项目的源代码中没有看到任何1.33或0.75(通过Eclipse编写).而且我不确定这里是否有"虚拟像素大小".

有Android或PhoneGap的人可以告诉我在哪里修复此问题吗？

谢谢你,杰罗姆.

更新2/11/14,19 AM:

我发现了window.devicePixelRatio,对于我的平板电脑,它是1.33.这符合Chrome和PhoneGap之间的差异.

我可以在PhoneGap应用程序启动时将该因素添加到我的计算中.我的问题转向相关问题.为什么Chrome会以CSS像素报告大小？我今天晚些时候会做一些测量.也许window.screen.availWidth是错误的措施......