Question

我有一个网页，我试图在我的Android设备上显示（从项目的资产目录加载）使用PhoneGap（使用普通的WebView设置为“appview”），但webview完全忽略了以下内容：

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

无论我在这一行中设置什么（我已经尝试明确设置缩放，设置宽度/高度，以像素为单位等），设备完全忽略它并使网站非常小并锚定在左上角 - 屏幕的角落。我可以使用捏合手势放大（即使我明确禁用了上面的html代码中的缩放），但我希望页面可以放大以正确适应设备的负载。

这是有趣的一点......如果我将完全相同的网站放在我的网络服务器上并使用我的测试设备上的默认浏览器导航到它，页面正确加载（缩放到适合设备的大小）。

请帮忙。

感谢。

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" />

这也完全被忽略了。

EDIT2：

这是有趣的事情......

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

以上行在模拟器中将页面缩放为2x，但在我的设备上没有任何更改（Samsung Epic运行2.2.1）。尽管如此，即使是2倍，页面也没有缩放到模拟器的宽度......我必须将其设置为“initial-scale = 2.5”。

Answer 1

尝试在扩展DroidGap的Java类的onCreate（）方法中添加以下两行。

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

如果您的视口标记现在开始工作，请告诉我。

Answer 2

我试过

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

未启用缩放。

使用以下设置，启用缩放

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

但视口标签无法正确控制，即使在视口标记中设置了最小比例= 1和最大比例= 1，所有页面都可以缩放。

页面导航现在出错，单击页面上的按钮，安卓后退按钮无法正常工作。

Answer 3

这里有很好的答案，但Cordova API似乎有所改变。

使用OnCreate方法（loadUrl之后或明确致电init后）：

    CordovaWebViewEngine engine = appView.getEngine();
    SystemWebView webView = (SystemWebView)engine.getView();
    WebSettings settings = webView.getSettings();
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);

Answer 4

如果你想让你的内容扩展到固定宽度（例如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函数。

Answer 5

我在带有phonegap的iphone上使用它

<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-- PhoneGap / WebView忽略了视口元标记？

5 个答案: