Pinch Zoom ile Android Telefon ve Cep Telefonları için

Question

Webapp'da çalışmak için zorlu bir şekilde zum yapmakta zorlanıyorum Phonegap ile oluşturuyorum. Şu anda, bir p etiketi görünümünde bir uzak komut dosyasını yüklüyorum, ancak html ekranın sınırlarından dışarı çıkıyor (tabi ki manzara modunu düzeltiyor).

Ne denli önemli değil Çalıştığım yerde tutam yakınlaştırma, hatta yatay kaydırma çubuğu bile göremiyorum. Üstbilgiye meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.8, user-scalable=1" /> eklemeyi denedim.

Sorun ben jquery mobile kullanarak, ancak aşağıdaki çözüm işe yaramadı çalışıyorum olabilir düşünüyorum ya:

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

(jquery mobil js dosyası inklüzyon önce eklendi).

EDIT: Ripple emülatöründe içerik taşmaları iyi olduğunda sağa kaydırma.

---

GÜNCELLEME: Tamam - benim app.java düzenlenmiş ve şimdi Büyütmek mümkün. Bununla birlikte, yalnızca yakınlaştırmayı değil, yakınlaştırmamı, ilk zumun sanırım 1 olduğunu gösterdiğimi tahmin ediyorum. Yatay kaydırma çubuğunun nasıl uzaklaştırılacağı veya ayarlanacağı konusunda herhangi bir önerisi var mı?

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

Bu yazı eski olduğunun farkındayım, ama burada başka gönderi halinde kendi yolunu googling herkese var:

Yatay yakınlaştırma aslında bünyesinde haricinde herhangi bir içerik için kullanılamaz - için hem iOS hem de Android bilgim. Bir div ile yeni bir uygulama oluşturmayı deneyin ve overflow:auto'un size bir şey vermesini sağlayın. JQuery Mobile'a uygulanan ScrollView var ve iScroll var. Form öğelerinin kaydırılabilir alan içinde olmasını istiyorsanız, iyi çalışır.

Gerçek içerikten uzaklaştıkça, aslında sizi içine kilitlediği mantıksız olduğunu düşünmüyorum. Vücudun dışında hiçbir şey gösterilemez, arka plan renginin veya görüntünün nasıl kırpılacağını hayal edin - hoş değil hiç de!

Answer 2

OP kodunu ve ek kaynakları kullanarak, açılış ekranı ile çalışan bir yakınlaştırma çözümü ve dikkat çekmek için bir çift "gotcha's" bulundu.

Yakaladım # 1: Eğer = "sabit" veri pozisyonunu kullanırsanız, yani (Android 2.3.1 SDK 9 test) sizin tutam yakınlaştırma özelliğini kaybedecek:

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

Yakaladım # 2: "target-densitydpi = device-dpi" başlık meta adı = "viewport" kullanırsanız, ölçeklemeniz benzersiz bir şekilde farklı olacaktır. Bu nedenle, tüm sayfalarda tutarlı şekilde kullanın veya kullanmayın.

İşte benim çalışma Snippet'ları var:

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/çekilebilir/sıçrama.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/hareket olayı ile sıkışmak bileşeni bağlama

Answer 3

(alfa/ağırlık png başlatıcı simgesinden Draw 9-patch ile yapılmış)/çekilebilir splashimage.png yapılabilir. , ör. jest ilgili şeyler için

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

özellikle jQuery Mobile