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

Question

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

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

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 的模拟器上运行时工作。我见过的唯一地方fail 在 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

Answer 2

正如在 cmets 中所讨论的，问题是由于 phonegap 设置的 minSdkVersion 低于我在 config.xml 中指定的值，因此用户使用的是 4.2.2（已知视口不可靠）。我试图弄清楚为什么这可能是[这里] [1]。

无论如何，如果您是因为视口问题而来到这里，那么我的研究以及与 Jason M. Batchelor 在 cmets 的讨论中得出的有用信息是：

• 确保元数据确实在更新（请参阅 Jason 的回答）
• 确保 minsdk 为 19+，视口行为在旧操作系统上似乎存在问题

• 经过大量测试，最适合我的视口设置是：

  var scale = windowHeight/appHeight; var vport =“宽度=设备宽度，用户可缩放=是，初始缩放=“+缩放+”， 最小刻度=“+刻度+”，最大刻度=“+刻度+”，目标-密度dpi=设备-dpi”； document.getElementById("viewport").setAttribute("content", vport);

但是 YMMV，它似乎取决于您使用的某些 CSS、您是否有任何比视口更宽的 div 以及可能的其他因素，因此我建议对您支持的每个 sdk 进行测试。