Question

我需要能够使用Android PhoneGap应用上的视口设置打开和关闭双指缩放。

但是在使用PhoneGap时，我无法使视口完全影响缩放。 我无法在PhoneGap中启用Pinch-zoom，但在使用Android Native浏览器浏览网页时，一切正常。

我花了很多时间寻找解决方案，没有任何结果。

我为测试创建了一个非常简单的index.html，其视口设置如下：

<meta name="viewport" content="user-scalable=yes" />

有些人建议我也试过了视口：

<meta name="viewport" content="user-scalable=1" />

Android PhoneGap的其他解决方案是启用此处建议的Android Native Pinch-Zoom： zoom in phonegap for android 但这对我不起作用，因为我需要能够控制来自javascript的缩放变焦。即我需要能够使用javascript更改视口设置，以控制何时可用缩放缩放（user-scalable = yes / user-scalable = no）

请注意其他视口设置，如“initial-scale”和“target-densitydpi”似乎工作正常。例如，设置initial-scale = 2会启动应用程序缩放。

（我目前正在测试PhoneGap 1.4.1和HTC Desire HD Android 2.3.3上的双指缩放）

我开始认为我错过了一些明显的东西，因为我找不到类似问题的信息......

最小的index.html：

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="user-scalable=yes" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Minimal AppLaud App</title>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
      <script type="text/javascript" charset="utf-8">

        var onDeviceReady = function() {
            document.getElementById("devready").innerHTML = "OnDeviceReady fired.";
        };

        function init() {
            document.addEventListener("deviceready", onDeviceReady, true);
        }   
      </script>  

  </head>
  <body onload="init();" id="stage" class="theme">
    <h2>Minimal AppLaud App</h2>
    <p> LOTS OF TEXT WHICH HAVE BEEN REMOVED HERE </p>

    <p><span id="devready">onDeviceReady not fired.</span></p>

  </body>
</html>

欣赏您可能有的任何想法！

Answer 1

您使用的是PhoneGap Build吗？ PhoneGap Build无法实现。

使用Desktop PhoneGap，如果您还没有，请按照PhoneGap Getting Started with Android Guide并在Eclipse项目中设置您的代码。

设置完成后，编辑您的Main Java文件，如入门指南中所示：添加以下导入：

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

＆＃39; super.loadUrl（＆＃34; file：///android_asset/www/index.html"）;＆＃39;作为启动指南的一部分，您输入的行添加：

settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);

清理并构建项目 - 现在应该允许缩放。

要限制用户可以放大的距离，请在每个HTML页面中添加一个元标记，如下所示：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">

Answer 2

刚刚确认Pinch Zoom正在使用以下Android手机：

三星Galaxy S820L Android 4.4
LG Sunset L33L Android 5.0

使用PhoneGap CLI（不是服务），在Windows上：

C:\>phonegap --version
5.4.1

Android SDK工具版Verion：

24.4.1 (from the SDK Manager)

以下是MainActivity.java的代码（platforms \ android \ src \ com \ phonegap \ helloworld）：

package com.phonegap.helloworld;

import android.os.Bundle;
import org.apache.cordova.*;

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

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);

        WebView webView = (WebView) appView.getEngine().getView();
        WebSettings settings = webView.getSettings();

        settings.setBuiltInZoomControls(true);
        settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
        settings.setSupportZoom(true);
    }
}

这是在index.html：

 <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=3, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

另外一个注意事项 - 通过此电话：

settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);

在构建时得到了这个：

uses or overrides a deprecated API - Note: Recompile with -Xlint:deprecation for details

评论出来，Zoom并未受到影响。

谢谢大家!!!

Answer 3

即使在此之后没有找到解决方案的人，我在Github找到了答案：

https://github.com/LouisT/cordova-useragent/issues/1

基本上你必须：

import android.webkit.WebView;

然后：

// super.appView.getSettings().setBuiltInZoomControls(true);
// super.appView.getSettings().setDefaultZoom(ZoomDensity.MEDIUM); 
// super.appView.getSettings().setSupportZoom(true);
// Instead use this
WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
settings.setSupportZoom(true);

Answer 4

对于cordova 5.x.x，您需要使用https://github.com/LouisT/cordova-useragent/issues/1

中的解决方案

import android.webkit.WebView;

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

对我来说，需要将ZoomDensity.MEDIUM更改为WebSettings.ZoomDensity.MEDIUM

Answer 5

我有完全相同的问题，除了测试不同的视口设置，我已经尝试了这个建议：Pinch Zoom in Android with Phonegap and jQUERY Mobile但我无法使其工作（在三星Galaxy SII，Android 4.0.3上测试）。但是，其他人报告使用链接中的提示成功进行了捏缩放。希望它也能帮到你！

Answer 6

html5文档应以：

开头

<!DOCTYPE html>

如果没有此行，则无法在Phonegap Android中使用视口AppBrowser

在Phonegap Android应用程序中启用视口双指缩放无效

6 个答案: