捏放大科爾多瓦> 5.x.x

Question

我需要實現捏縮放html頁面。我無法與下面的代碼做，在MainActivity.java

• 這是我的第一個混合的應用程序
• 科爾多瓦（5.0.4）+ JQM Android應用
• 對於Android的目標平臺是API 23分鐘sdk支持版本是API 14 ..
• 代碼正常工作之前我更新cordova cli到5.xx

是否有任何與cordova> 5.x.x更新，以便上面的代碼在構建時失敗？

預先感謝您。

import android.webkit.WebSettings; 
import android.webkit.WebSettings.ZoomDensity; 
public class MainActivity extends CordovaActivity { 
    @Override public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     // Set by in config.xml 
     loadUrl(launchUrl) 

     super.appView.getSettings().setBuiltInZoomControls(true); 
     super.appView.getSettings().setDefaultZoom(ZoomDensity.MEDIUM); 
     super.appView.getSettings().setSupportZoom(true); 
    } 
} 

Answer 1

@daxesh，
感謝張貼的問題。當你有時間閱讀本FAQ：
Top Mistakes by Developers new to Cordova/Phonegap

一個你應該知道的第一件事情 - 如果你有什麼關於科爾多瓦或PhoneGap的，它是不是在一套核心的功能可用，那麼你應該看看爲一個插件來做你需要的。你應該做的每件事的最後一件事是添加本地代碼（在這種情況下，如果是iOS，則爲Objective-C）。唯一的例外是如果你要創建一個插件。

對於你的任務，你想確保你有適當的設置，並在五（5）個不同的地方查找。清楚的是，你將用HTML5和CSS3完成整個任務。這是因爲我們正在使用webview庫。

1. 在你的視口設置在你的CSS
2. 設置
3. 有時有一個插件做你需要什麼
4. 有時你需要使用一個JavaScript庫
5. 設置與第3 pary的WebView庫

關於＃1，最基本的設置是：

<meta name="viewport" content="width=device-width, initial-scale=1">

避免使用minimum-scale和maximum-scale，或者收縮web視圖的大小調整的任何其它設置。

這個mozilla文章是一個很好的參考，Using the viewport meta tag to control layout on mobile browsers。 CanIUse.com也是一個很好的資源。您也可以Google：html5 viewport。

要清楚的是，沒有設置「捏縮放」，但如果你告訴webview庫不允許不同的「縮放」，那麼它不會調整大小 - 不管你做了什麼。所以請確保只使用你知道*需要的東西，不要再使用它。

關於＃2，偶爾會發現一個CSS3設置，可以幫助您到達需要的位置。

此視頻將幫助你到達你想要的地方。在12點25分至16點15分，他談到「捏縮放」，但你可能想看整個視頻。
Stephen Woods: "Creating Responsive HTML5 Touch Interfaces" (24 min.)

你也可以谷歌：css webkit pinch

在＃3，第三方插件是在http://cordova.apache.org/plugins/。我目前沒有發現。

關於＃4，偶爾會更容易找到可以處理任務的Javascript庫。您將要檢查這些流行的框架：Ionic，JQuery Mobile，YUI，BootStrap

在＃5，用科爾多瓦/ PhoneGap的當每一個平臺使用隨系統默認的WebView庫。在iOS上稱爲UIWebView和WKWebview（有兩（2）個庫）。

不過，有時你可以通過eddyverbruggen使用第三方庫，像Crosswalk或cordova-plugin-wkwebview。當使用這些替代庫時，如果他們有內置的支持，你必須問作者。通常他們會這樣做，因爲他們通常以Webkit library開頭。要詳細瞭解webkit問題，請閱讀Paul Irish的文章：Webkit for Developers。 –祝你好運

Answer 2

我認爲你應該嘗試類似hammer.js（http://hammerjs.github.io/）的方式來檢測捏手勢然後用JS/CSS轉換內容。不要依賴修改Cordova/PhoneGap內部的Java。

但是，如果你真的真的需要做這種方式（通過修改MainActivity.java），你可以嘗試這樣的：

import android.webkit.WebView; 
import android.webkit.WebSettings; 
import android.webkit.WebSettings.ZoomDensity; 

public class MainActivity extends CordovaActivity { 
    @Override public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     loadUrl(launchUrl); 

     WebView webView = (WebView) appView.getEngine().getView(); 
     WebSettings settings = webView.getSettings(); 
     settings.setBuiltInZoomControls(true); 
     settings.setDefaultZoom(ZoomDensity.MEDIUM); 
     settings.setSupportZoom(true); 
    } 
}