Question

我需要实现捏缩放html页面。我无法使用MainActivity.java中的以下代码执行此操作

这是我的第一个混合应用
Cordova（5.0.4）+ JQM android应用程序
对于Android目标平台是API 23，min sdk支持版本是API 14 ..
代码在我将cordova cli更新为5.x.x之前按预期工作。

有没有更新cordova＆gt; 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

你应该知道的第一件事 - 如果你有关于Cordova或Phonegap的任何事情，并且它在核心功能集中不可用，那么你应该寻找一个插件来做你需要的。你应该做的最后一件事是添加本机代码（在本例中为Java，Objective-C，如果是iOS）。唯一的例外是你要创建一个插件。

对于您的任务，您需要确保拥有适当的设置，并查看五（5）个不同的位置。要清楚，您将使用HTML5和CSS3完成整个任务。这是因为我们正在使用webview库。

在视口中设置
CSS中的设置
有时候会有一个插件来做你需要的事情
有时您需要使用Javascript库
使用第三层webview库的设置

在＃1 上，最基本的设置是：

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

避免使用minimum-scale和maximum-scale，或任何其他限制调整网页视图大小的设置。

这篇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.)

您也可以使用Google：css webkit pinch

在＃3 上，第三方插件位于http://cordova.apache.org/plugins/。我现在没有找到。

在＃4 上，偶尔会找到一个可以处理任务的Javascript库。您需要检查这些流行的框架：Ionic，JQuery Mobile，YUI，BootStrap

在＃5 上，当使用Cordova / 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);
    }
}

使用Cordova进行缩放＆gt; 5.x.x

2 个答案: