Phonegap 및 jQUERY Mobile이 포함 된 Android에서 핀치 확대/축소

Question

Phonegap으로 생성중인 webapp에서 핀치 확대/축소가 작동하는 데 어려움을 겪고 있습니다. 현재, p 태그에 정보를로드 할 때 원격 스크립트를 볼 수 있지만 html은 화면의 경계 밖으로 나옵니다 (물론 가로 모드로 설정하면이 문제가 해결됩니다).

아무리해도 나는 꼬집기 확대/축소가 작동하지 않거나 horizantal 스크롤바가 나타날 수 없습니다. 헤더에 < meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.8, user-scalable=1" />을 추가하려고했습니다.

나는 문제가 나는 JQuery와 모바일을 사용하지만, 다음과 같은 솔루션이 작동하지 않았다 시도하고 있다고 할 수있다 생각 하나 :

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

(JQuery와 모바일 JS 파일 흠 앞에 추가).

EDIT : 리플 에뮬레이터에서 콘텐츠 오버플로가 제대로 작동하는 경우 오른쪽으로 스크롤하십시오.

---

UPDATE : 좋아 - 내 app.java을 편집하고 지금 확대 할 수 있어요. 그러나, 나는 줌인이 아닌 줌인 만 할 수 있으며 초기 줌이 1로 설정되어 있음을 나타냅니다. 누구나 축소하거나 수평 스크롤 막대를 설정하는 방법에 대한 제안이 있습니까?

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

이 게시물은 오래 실현,하지만 여기에 다른 게시물에 그들의 방법을 인터넷 검색을 누군가에게있다 :

수평 줌은 실제로 신체 내를 제외한 모든 콘텐츠를 사용할 수 없습니다 -에 대한 내 지식으로 iOS와 Android 모두. div로 새 앱을 만들고 overflow:auto에게 무엇이든 주려고하십시오. ScrollView가 jQuery Mobile에 구현되었고 iScroll이 있습니다. 양식 요소를 스크롤 영역 내에두기를 원하는 경우에도 잘 작동하지 않습니다.

실제 내용보다 더 멀리 축소하는 것은 실제로 당신을 감추는 것은 무리라고 생각하지 않습니다. 시체 바깥에 아무것도 보이지 않습니다. 배경색이나 이미지가 어떻게 잘릴 지 상상해보십시오. 조금도!

Answer 2

OP 코드와 추가 리소스를 사용하여 튀는 화면과 조만간주의해야 할 커플 "gotcha"가 작동하는 줌 솔루션을 발견했습니다.

잡았다 # 1 : 당신이 = "고정"데이터 위치를 사용하는 경우, 즉 (안드로이드 2.3.1 SDK (9) 테스트) 당신의 핀치 줌 기능을 잃게됩니다 :

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

잡았다 번호를 2 : "target-densitydpi = device-dpi"헤더 메타 이름 = "뷰포트"를 사용하면 크기 조정이 고유하게 달라 지므로 모든 페이지에서 일관되게 사용하거나 사용하지 마십시오.

은 여기 내 작업 조각을이다 :

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

고해상도/드로어 블/사진 시작합니다.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" /> 

입술/동작 이벤트에 협지되는 구성 요소를 결합

Answer 3

(알파 승/PNG로 런처 아이콘에서 Draw 9-patch와 제)/그리기 splashimage.png 이 행해질 수있다. 예 : 제스처와 관련된 것들에 대한

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

특히 JQuery와 모바일