捏放大科尔多瓦> 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); 
    } 
}