web-dev-qa-db-fra.com

Activer le pincement de zoom de la fenêtre dans l'application Android Phonegap n'a aucun effet

Je dois pouvoir activer et désactiver le zoom par pincement à l'aide du paramètre de fenêtre d'affichage de mon application Android PhoneGap.

Mais je ne parviens pas à ce que la fenêtre d'affichage affecte le pincement-zoom lorsque j'utilise PhoneGap. Je ne peux pas activer PhoneGap en mode pincement-zoom, mais lorsque vous naviguez avec le navigateur Android Native vers la page Web, tout fonctionne correctement.

J'ai passé beaucoup de temps à chercher une solution, sans résultat.

J'ai créé un très simple index.html pour le test, avec un paramètre de fenêtre tel que:

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

Comme certains l'ont suggéré, j'ai également essayé la fenêtre d'affichage:

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

D'autres solutions pour Android PhoneGap seraient de permettre à Android Native Pinch-Zoom qui ont été suggérées ici: zoom dans phonegap pour Android Mais cela ne fonctionnera pas pour moi, car j'ai besoin de pour pouvoir contrôler le pincement-zoom de javascript. C'est à dire. Je dois pouvoir utiliser javascript pour modifier le paramètre de la fenêtre d'affichage, afin de contrôler le moment où le zoom optique est disponible (user-scalable = yes/user-scalable = no)

Notez que les autres paramètres de la fenêtre, tels que "échelle initiale" et "densité cible", semblent fonctionner correctement. Par exemple, si vous définissez initial-scale = 2, l'application est zoomée.

(Je teste actuellement le pincement-zoom sur PhoneGap 1.4.1 et HTC Desire HD Android 2.3.3)

Je commence à penser que j'ai oublié quelque chose d'évident, car je trouve si peu d'informations sur des problèmes similaires ...

Le minimum 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>

Appréciez toutes les idées que vous pourriez avoir!

androidcordova
18
Koniak

J'ai exactement le même problème et en plus de tester différents paramètres de fenêtre, j'ai essayé les suggestions suivantes: Pincez le zoom dans Android avec Phonegap et jQUERY Mobile mais je ne peux pas le faire fonctionner (test sur Samsung Galaxy SII, Android 4.0.3). Cependant, d'autres ont signalé avoir réussi à effectuer un pincement avec zoom en utilisant les astuces du lien. J'espère que ça vous aide aussi!

0
Björn

Utilisez-vous PhoneGap Build? Ce n'est pas possible avec PhoneGap Build.

Avec Desktop PhoneGap, si ce n’est déjà fait, suivez le Guide PhoneGap Mise en route avec Android et configurez votre code dans un projet Eclipse.

Une fois la configuration effectuée, éditez votre fichier Java principal, comme dans le guide de démarrage: Ajoutez les importations suivantes:

import Android.webkit.WebSettings; 
import Android.webkit.WebSettings.ZoomDensity;

En dessous de 'super.loadUrl ("file: ///Android_asset/www/index.html");' Dans la ligne que vous avez insérée, dans le guide de démarrage, ajoutez: 

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

Nettoyez et construisez votre projet - le zoom devrait maintenant être autorisé.

Pour limiter la portée du zoom des utilisateurs, ajoutez une balise META, comme celle ci-dessous, à chaque page HTML: 

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

Je viens de confirmer que Pinch Zoom fonctionne sur les téléphones Android suivants:

  • Samsung Galaxy S820L Android 4.4

  • LG Sunset L33L Android 5.0

Avec PhoneGap CLI (pas le service), sous Windows:

C:\>phonegap --version
5.4.1

Outils SDK Android Verion:

24.4.1 (from the SDK Manager)

Voici le code pour MainActivity.Java (plates-formes\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);
    }
}

Et cela se trouve dans 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" />

Une note supplémentaire - avec cet appel:

settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);

obtenu ceci lors de la construction:

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

Commenté, et Zoom n'a pas été affecté.

Merci les gars!!!

6
Jopin

Quiconque, même après cela, n'a pas trouvé de solution à cela, j'ai trouvé une réponse à laquelle nous avons répondu le 17 novembre 2015.

Solution ici

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);

Cela a fonctionné pour moi.

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

1
Swadish

Pour cordova 5.x.x, vous devez utiliser la solution de 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);

Pour moi, il était nécessaire de changer ZoomDensity.MEDIUM en WebSettings.ZoomDensity.MEDIUM

0
HaiderSahib