在Phonegap Android应用程序中启用视口捏合缩放不起作用

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

但是在使用PhoneGap时，我根本无法让视口影响捏缩放。我无法在PhoneGap中打开Pinch-zoom，但是当使用Android本机浏览器浏览网页时，一切正常。

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

我创建了一个非常简单的索引.html用于测试，具有如下视口设置：

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

正如一些人建议的那样，我也尝试了视口：

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

Android

PhoneGap的其他解决方案是启用Android Native Pinch-Zoom，这是在这里建议的：放大 Android版 PhoneGap但这对我不起作用，因为我需要能够控制 javascript 中的捏缩放。即我需要能够使用 javascript 来更改视口设置，以控制何时可以使用捏缩放(用户可扩展=是/用户可扩展=否(

请注意，其他视口设置(如"初始比例"和"目标密度dpi"(似乎工作正常。例如，设置初始缩放 = 2 将启动缩放的应用程序。

(我目前正在PhoneGap 1.4.1和HTC Desire HD Android 2.3.3上测试捏缩放(

我

开始认为我错过了一些明显的东西，因为我发现关于类似问题的信息很少......

最小索引.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>

感谢您的任何想法！

你使用的是PhoneGap Build吗？这在PhoneGap Build中是不可能的。

使用Desktop PhoneGap，如果您还没有，请按照PhoneGap入门Android指南进行操作，并在Eclipse项目中设置代码。

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

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

在"super.loadUrl("file:///android_asset/www/index.html"(;"行下方，作为启动指南的一部分，添加：

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">

刚刚确认Pinch Zoom适用于以下Android手机：

三星银河S820L 安卓 4.4
LG 日落 L33L 安卓 5.0

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

C:>phonegap --version
5.4.1

Android SDK Tools 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);
    }
}

这是在索引中.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 不受影响。

谢谢你们!!

即使在

这之后也没有找到解决方案，我在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);

对于 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

我有完全相同的问题，除了测试不同的视口设置外，我还尝试了以下建议：使用 Phonegap 和 jQUERY Mobile 在 Android 中捏缩放，但我无法让它工作(在三星 Galaxy SII、Android 4.0.3 上测试(。但是，其他人报告说使用链接中的提示成功进行了捏缩放。希望它也能帮助你！

html5 文档应以以下内容开头：

<!DOCTYPE html>

没有此行不起作用的视口应用程序浏览器在Phonegap Android中

相关内容

最新更新

热门标签：