logo标签列表

Android-- PhoneGap/WebView忽略视口元标记？

androidhtmlwebviewcordova
17

我有一个网页，想要在我的Android设备上显示它（从项目的assets目录加载），使用PhoneGap（它使用一个正常的WebView作为“appview”），但是WebView完全忽略了以下内容：

<meta name = "viewport" content = "user-scalable=no,width=device-width" />
无论我在这一行中设置什么（我已经尝试明确设置缩放比例，以像素为单位设置宽度/高度等），设备都会完全忽略它，并将网站呈现得非常小并锚定在屏幕的左上角。我可以使用捏合手势进行缩放（即使我在上面的html代码中明确禁用了缩放），但我希望页面在加载时被放大以适当地适应设备。
有趣的是...... 如果我将完全相同的网站放到我的Web服务器上，并使用测试设备上的默认浏览器导航到它，页面会正确加载（按适当大小缩放到设备）。
请帮帮我。
谢谢。
EDIT1：
我目前的设置为：
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

那也完全被忽略了。

编辑2：

这里有一些有趣的东西...

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

上述代码在模拟器上将页面缩放为2倍，但在我的设备上（Samsung Epic，运行2.2.1）没有任何变化。即使是2倍，页面也未按照模拟器的宽度进行缩放...我需要将其设置为类似于“initial-scale=2.5”的值。

添加initial-scale=1会改变什么吗？ - davejohnson
嗨。我的当前设置是：<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> ... 这没有任何作用。它完全被忽略了。谢谢。 - RyanM
你可能想看一下我在这里发布的stackoverflow帖子：http://goo.gl/P1nK3，其中还指向了我提交的一个缺陷。很可能不是被忽略了，而是值冲突并被丢弃了。我有许多关于参数各种排列组合的结果。你可能会发现一些有用的东西。 :) - lilbyrdie
5个回答
11
在扩展DroidGap的Java类的onCreate()方法中添加以下两行代码。
this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);

如果你的视口标签现在开始起作用，请告诉我。

这就是它（以及伊万的答案）- 这需要数百万更多的赞。虽然对我来说，需要更新的是public class MyApp extends CordovaActivity方法，而不是DroidGap。也许你可以更新一下你的答案，因为它仍然相关！ - Pete
抱歉各位，我是新手。我应该在哪里添加这段代码？我该怎么做才能让我的视口工作？我有一个 Cordova 3.6 项目，但我的视口不起作用。所以...我找到了这个解决方案，听起来不错，但是...是的，我不知道在哪里实现这段代码。 :-/ - Sithys
1
好的回答，但API有些变化。现在是：((SystemWebView) appView.getEngine().getView()).getSettings().xxx - Philippe
2

我已经尝试过

this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);

未启用缩放功能。

使用以下设置，启用缩放功能

this.appView.getStrings().setSupportZoom(true);

但是这并没有通过viewport标签正确地控制，现在所有页面都可以缩放，即使在viewport标签中设置了minimum-scale=1和maximum-scale=1。

此外，页面导航现在出现错误，点击页面上的按钮和Android返回按钮无法正常工作。

错误：this.appView.getSettings().setSupportZoom(true); - Velda
2
这里有很好的答案，但Cordova API似乎有所改变。
在OnCreate方法中（在loadUrl之后或者在显式调用init之后）：
    CordovaWebViewEngine engine = appView.getEngine();
    SystemWebView webView = (SystemWebView)engine.getView();
    WebSettings settings = webView.getSettings();
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
1

如果您想让 Android 将内容按固定宽度（例如 1024）缩放，请使用以下代码：

<meta name="viewport" id="viewport" content="width=1024">
<script type="text/javascript">
    var viewPortWidth = 1024;
    function setViewport() {
    if ((navigator.userAgent.toLowerCase().indexOf("android")!=-1)) {
        var wW0 = window.screen.width;
        var scale = wW0/viewPortWidth;
        var vPort = "width="+viewPortWidth+", maximum-scale="+scale+", minimum-scale="+scale+", initial-scale="+scale+", user-scalable=yes";
        document.getElementById("viewport").setAttribute("content", vPort);
    }
    }
    setViewport();
</script>

此外，您应该添加事件侦听器 onorientationchange 来调用setViewport函数。
我曾对此抱有希望，但它并没有起作用。我的页面宽度为760像素，屏幕宽度为1080像素，使用缩放比例约为0.465时可以适配。760/1080约为0.704。 - Jonas Äppelgran
我认为这里的诀窍不仅仅是提供width属性，虽然它应该有效但显然并没有，还需要提供 min-scale 和 max-scale 属性，这可能会起作用。 - commonpike
-1

我在 iPhone 上使用 PhoneGap 进行开发。

<meta name="description" content="trevorrudolph.com">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon" href="http://trevorrudolph.com/wordpress/apple-touch-icon.png">
我相信这个问题是针对Android的，而不是iPhone。 - courtsimas
我很久以前写了这个，那时我还不理解。 - Trevor Rudolph
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接