android - 在 Phonegap Android 应用程序中忽略了视口(viewport)设置，但仅在某些手机上？

Question

一位用户报告说他的手机上的 Viewport 元标记被忽略了，但它在我测试过的所有地方都有效。为什么视口(viewport)在一台 Android 设备上工作，而在另一台具有相同操作系统版本的设备上失败？

这是在 Phonegap 3.5 Android 应用程序上，它将所有内容布置为设定大小 (1800x1200)，然后使用视口(viewport)将其缩放到设备的大小，如下所示:

var scale = windowHeight/appHeight;
var vport = "width=device-width, user-scalable=0, initial-scale="+scale+", 
    minimum-scale="+scale+", maximum-scale="+scale;
document.getElementById("viewport").setAttribute("content", vport);

这在我尝试过的所有地方都很好用。在最新的 Firefox 和 Chrome 中工作，在编译为 Android 并在 Nexus 5 或 Nexus 10 或 Galaxy 3 上运行时工作，在 SDK 19、20 或 21 的模拟器上运行时也工作。我唯一看到它的地方失败是在 SDK 17 (Android 4.2.2) 或更低版本上，但这应该不是问题，因为我将 android-minSdkVersion 设置为 19 (Android 4.4.2)。

我的问题是，一位用户报告说他的 Sony Xperia Z 上的视口(viewport)设置被忽略(文本很大)。所以我的问题是，视口(viewport)支持如何在具有相同操作系统的手机上有所不同？比如两部4.4.2手机有没有可能有不同的webkit？

编辑 - android-minSdkVersion 是否可能被忽略？我无法确认用户的 SDK 版本，但是当我尝试将生产 apk 安装到 4.2.2 模拟器时，它允许我。我预计会出现“不受支持的 sdk”错误或其他问题......

Answer 1

您是否确认用户使用的是手机的内置浏览器，还是 Chrome 或 Firefox Mobile？ webkit 很有可能可以在手机之间进行调整。例如，我的 Droid Turbo 将 Chrome 作为默认浏览器，但我的三星 Galaxy S3 有一个基于 webkit 的系统浏览器，我将其替换为 Chrome。

更有可能的是，您遇到的问题是元标记不支持 ID。您没有包含具体来源，但标准元标记标记是这样的:

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

如果您的代码如下所示:

<meta name="viewport" content="...etc...">

然后尝试使用 document.getElementById() 访问它会给你零星的结果，如果它有效的话。

您要做的是以其他方式搜索元标记，例如:

var vp = document.querySelector('[name="viewport"]');

然后您可以按照您已经期望的方式将 vp 作为一个对象来使用。

有关 querySelector 的更多信息:https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector