Pellizcar Acercar Android con Phonegap y jQUERY Mobile

Question

He estado teniendo problemas para obtener el zoom de pellizco para trabajar en la aplicación web que estoy creando con Phonegap. Actualmente, estoy cargando información en una etiqueta p, veo una secuencia de comandos remota, pero html sale de los límites de la pantalla (por supuesto, ir al modo horizontal corrige esto).

No importa, lo que intento no puedo hacer que el zoom de pellizco funcione o que aparezca una barra de desplazamiento horizontal. Intenté agregar < meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.8, user-scalable=1" /> en el encabezado.

creo que el problema puede ser que estoy usando jQuery Mobile, pero tratando la siguiente solución no funciona bien:

$(document).bind("mobileinit", function(){ 
     $.mobile.metaViewportContent = "width=device-width, minimum-scale=1, maximum-scale=2"; 
}); 

(añadido antes de inclusiones jQuery Mobile archivo JS).

EDIT: Desplazarse hacia la derecha cuando el desbordamiento de contenido funciona bien en el emulador Ripple.

---

ACTUALIZACIÓN: Vale - editado mi app.java y yo soy capaz de acercar ahora. Sin embargo, solo puedo acercar, no alejar, lo que indica que el zoom inicial está configurado en 1, supongo. ¿Alguien tiene alguna sugerencia sobre cómo alejar o configurar una barra de desplazamiento horizontal?

package com.phonegap.Sample; 

import android.app.Activity; 
import android.os.Bundle; 
import com.phonegap.*; 
import android.webkit.WebSettings; 

public class Sample extends DroidGap 
{ 
@Override 
public void onCreate(Bundle savedInstanceState) 
{ 


    super.onCreate(savedInstanceState); 
    super.loadUrl("file:///android_asset/www/index.html"); 

    WebSettings ws = super.appView.getSettings(); 
    ws.setSupportZoom(true); 
    ws.setBuiltInZoomControls(true); 

} 
} 

source

Answer 1

realizo este post es viejo, pero esto es a cualquier otra persona googlear su camino en el mensaje:

zoom horizontal no está realmente disponible para cualquier contenido excepto dentro del cuerpo - para iOS y Android, que yo sepa. Intenta crear una nueva aplicación con un div e intenta hacer que overflow:auto te dé cualquier cosa. ScrollView se está implementando en jQuery Mobile, y está iScroll. Ninguno de los dos funciona bien si desea que los elementos de formulario estén dentro del área desplazable.

En cuanto a alejarse un poco más que el contenido real, no creo que sea irrazonable que realmente lo encierre. No hay nada fuera del cuerpo que pueda mostrarse, imagine cómo se recortaría un color de fondo o una imagen. ¡en absoluto!

Answer 2

Utilizando el código OP y los recursos adicionales, se encontró la solución de zoom de trabajo con pantalla de bienvenida y un par de "gotcha's" para tener en cuenta.

Problema nº 1: Si utiliza la posición de datos = "fijo", perderá su función pizca de zoom (probado en Android 2.3.1 SDK 9), es decir:

<div data-role="footer" data-position="fixed"> 
     <h1>---</h1> 
    </div> 
    <!-- /footer --> 

Problema nº 2: Si usa el encabezado "target-densitydpi = device-dpi" meta name = "viewport", su escalamiento será únicamente diferente, por lo tanto, utilícela o no la utilice de manera uniforme en todas las páginas.

Aquí está mi Fragmentos de trabajo:

org.packagename/src/MainActivity.java

package com.packagename; 

    import android.os.Bundle; 
    import android.webkit.WebSettings; 
    import org.apache.cordova.*; 
    public class MainActivity extends DroidGap { 
     /** Called when the activity is first created. */ 
     @Override 
     public void onCreate(Bundle savedInstanceState) { 
      super.onCreate(savedInstanceState); 
      super.setIntegerProperty("splashscreen", R.drawable.splash); 
      super.setStringProperty("loadingDialog", "Starting your app..."); 
      super.loadUrl("file:///android_asset/www/index.html", 1500); 

      WebSettings settings = super.appView.getSettings(); 
      settings.setBuiltInZoomControls(true); 
      settings.setSupportZoom(true); 
      //settings.setDefaultZoom(ZoomDensity.FAR);  
     } 
    } 

res/estirable/salpicaduras.XML

<?xml version="1.0" encoding="utf-8"?> 
    <bitmap xmlns:android="http://schemas.android.com/apk/res/android" 
     android:src="@drawable/splashimage" 
     android:gravity="center_horizontal|center_vertical" /> 

res/splashimage.png dibujable/ (hecho con Draw 9-patch de icono lanzador png w/alfa)

Answer 3

de unión del componente a pellizcado con evento de gesto se puede hacer. p.

var con=document.getElementById('containerId'); 

con.addEventListener('gesturechange',function(e){ 
    if(e.scale>1) 
    { 
     //zoom in 
    } 
    else if(e.scale<1) 
    { 
     //zoom out 
    } 
}); 

Answer 4

Para las cosas relacionadas con gesto haga clic aquí

jgestures

especialmente para jQuery Mobile