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是错误的衡量标准......

Android PhoneGap应用程序没有像等效的Chrome /浏览器页面那样调整内容

0 个答案: