Question

用户报告说他的手机上忽略了Viewport元标记，但它在我测试的任何地方都可以使用。为什么viewport可以在一台Android设备上运行而在另一台设备上使用相同的OS版本会失败？

这是在一个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.这是我见过它的唯一地方失败是在SDK 17（Android 4.2.2）或更低版本，但这应该不是问题，因为我将android-minSdkVersion设置为19（Android 4.4.2）。

我的问题是用户报告他的Sony Xperia Z上的视口设置被忽略（文字很大）。所以我的问题是，Viewport支持如何在具有相同操作系统的手机上有所不同？例如，两部4.4.2手机有可能拥有不同的网络平台吗？

编辑 - 是否有可能忽略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

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

无论如何，如果你因为视口问题而来到这里，我的研究和Jason M. Batchelor在评论中讨论的有用的东西是：

确保meta正在更新（请参阅Jason的回答）
确保minsdk为19+，视口行为在较旧的操作系统上似乎有问题
经过大量测试后，最适合我的视口设置是：

var scale = windowHeight / appHeight; var vport =“width = device-width，user-scalable = yes，initial-scale =”+ scale +“， minimum-scale =“+ scale +”，maximum-scale =“+ scale +”，target-densitydpi = device-dpi“; document.getElementById（“viewport”）。setAttribute（“content”，vport）;

然而YMMV，它似乎依赖于你使用的一些CSS，你是否有比视口更宽的div，以及可能的其他东西，所以我建议你测试你支持的每个sdk。

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

2 个答案: