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

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

上面一行缩放页面在模拟器中2倍还改变了我的设备上没有（三星Epic运行2.2.1）。尽管如此，即使是2倍，页面也没有被缩放到模拟器的宽度...我必须将它设置为“initial-scale = 2.5”。

来源

2011-02-06 RyanM

不添加初始规模= 1个改变什么？ – davejohnson 2011-02-07 05:40:02

嗨。我的当前设置是： ...这什么都不做。它完全被忽略了。感谢 – RyanM 2011-02-07 13:59:48

你可能想看看我的帖子：http：//goo.gl/P1nK3，它也指出我提交的缺陷。这很可能不是他们被忽略，但是这些价值观是相互冲突的并被抛弃。我对参数的各种排列有很多结果。你可能会发现有用的东西。 :) – lilbyrdie 2011-03-08 20:28:15

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

来源

2011-03-10 03:08:50

我相信这个问题是Android专用，但不是iPhone。 – courtsimas 2012-02-13 17:02:05

我很早以前就写过这篇文章，我明白了这一点， – 2012-02-13 18:18:19

尝试增加在延伸DroidGap Java类的onCreate（）方法下面的两行。

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

让我知道你的视口标签现在开始工作。

来源

2011-11-03 15:35:57

我已经尝试

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

未启用放大。

通过以下设置，缩放启用

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

但它不是由视口标签正确的控制，所有的页面都是可缩放现在连最小规模= 1和最大规模= 1个集视标签。

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

来源

2011-12-07 08:44:34 Ivan

如果你希望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功能。

来源

2013-03-14 14:41:23

这里有很好的答案，但科尔多瓦API似乎有所改变。

在OnCreate方法（后loadUrl或以后你叫init明确）：

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

来源

2015-08-30 21:51:24 Philippe

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

回答

相关问题