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忽略視口元標記？

回答

相關問題