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

Kon*_*iak 19 android cordova

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

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

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

我创建了一个非常简单的index.html用于测试,其视口设置如下:

<meta name="viewport" content="user-scalable=yes" />
Run Code Online (Sandbox Code Playgroud)

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

<meta name="viewport" content="user-scalable=1" />
Run Code Online (Sandbox Code Playgroud)

Android PhoneGap的其他解决方案是启用这里建议的Android Native Pinch-Zoom: 放大android的phonegap 但是这对我不起作用,因为我需要能够控制来自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>
Run Code Online (Sandbox Code Playgroud)

欣赏您可能拥有的任何想法!

小智 13

你在使用PhoneGap Build吗?PhoneGap Build无法实现.

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

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

import android.webkit.WebSettings; 
import android.webkit.WebSettings.ZoomDensity;
Run Code Online (Sandbox Code Playgroud)

在'super.loadUrl("file:///android_asset/www/index.html")下方;' 作为启动指南的一部分,您输入的行添加:

settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM); 
Run Code Online (Sandbox Code Playgroud)

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

要限制用户可以放大的范围,请在每个HTML页面中添加一个元标记,如下所示:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">
Run Code Online (Sandbox Code Playgroud)

  • 在我的情况下,我不得不使用它:super.appView.getSettings().setBuiltInZoomControls(true); super.appView.getSettings()setDefaultZoom(ZoomDensity.MEDIUM)..super.appView.getSettings()setSupportZoom(真); (6认同)

Jop*_*pin 6

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

  • 三星Galaxy S820L Android 4.4

  • LG Sunset L33L Android 5.0

使用PhoneGap CLI(不是服务),在Windows上:

C:\>phonegap --version
5.4.1
Run Code Online (Sandbox Code Playgroud)

Android SDK工具Verion:

24.4.1 (from the SDK Manager)
Run Code Online (Sandbox Code Playgroud)

以下是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);
    }
}
Run Code Online (Sandbox Code Playgroud)

这是在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" />
Run Code Online (Sandbox Code Playgroud)

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

settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
Run Code Online (Sandbox Code Playgroud)

建设时得到这个:

uses or overrides a deprecated API - Note: Recompile with -Xlint:deprecation for details
Run Code Online (Sandbox Code Playgroud)

评论出来,Zoom没有受到影响.

感谢你们!!!


小智 0

我有完全相同的问题,除了测试不同的视口设置之外,我还尝试了以下建议:Pinch Zoom in Android with Phonegap and jQUERY Mobile但我无法使其工作(在 Samsung Galaxy SII、Android 4.0.3 上测试) 。然而,其他人报告了使用链接中的提示成功进行捏缩放。希望对你也有帮助!