Щепотка Увеличить в Android с PhoneGap и JQUERY Mobile

Мне было трудно получить масштабирование для работы в веб-приложении, которое я создаю с помощью Phonegap. В настоящее время я загружаю информацию в тег p для просмотра удаленного скрипта, но HTML-код выходит за пределы экрана (конечно, переход в альбомный режим исправляет это).

Неважно, что я пытаюсь, я не могу заставить работать масштабирование или даже горизонтальную полосу прокрутки. Я попытался добавить & lt; meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.8, user-scalable=1" /> в заголовок.

Я думаю, что проблема может быть в том, что я использую jquery mobile, но попытка следующего решения также не сработала:

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

(добавлено до включения jquery mobile js файла).

РЕДАКТИРОВАТЬ: прокрутка вправо, когда переполнение содержимого работает нормально в эмуляторе Ripple.

ОБНОВЛЕНИЕ: Хорошо - отредактировал мой 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); 

}
}

источник

Ответы

Ответ 1

Я понимаю, что этот пост старый, но здесь кто-нибудь еще ищет свой пост в этом сообщении:

Горизонтальный зум на самом деле не доступен для любого контента, кроме как внутри тела - для iOS и Android, насколько мне известно. Попробуйте создать новое приложение с помощью div и попытаться заставить overflow:auto дать вам что-нибудь. Там ScrollView внедряется в jQuery Mobile, а там iScroll. Ни то, ни другое не работает, если вы хотите, чтобы элементы формы находились внутри прокручиваемой области.

Что касается уменьшения дальше, чем фактический контент, я не думаю, что это необоснованно, это фактически блокирует вас. Там нет ничего за пределами тела, которое может быть показано, представьте, как будет обрезан цвет фона или изображение - совсем не приятно!

Ответ 2

Для жестов связанных вещей перейдите по этой ссылке

jgestures

специально для Jquery Mobile

Ответ 3

Используя код OP и дополнительные ресурсы, мы нашли работающее решение для увеличения с помощью заставки и нескольких "хитростей", на которые стоит обратить внимание.

Получил # 1: Если вы используете data-position = "fixed", вы потеряете функцию масштабирования пинча (протестировано в Android 2.3.1 SDK 9), т.е.

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

Получил # 2: Если вы используете заголовок meta name = target-dpi = device-dpi "meta name =" viewport ", масштабирование будет уникальным - поэтому используйте или не используйте последовательно на всех страницах.

Вот мои рабочие фрагменты:

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

разреш/вытяжка /splash.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 (Сделано с помощью Draw 9-patch из значка запуска PNG с альфа-версией)

Ответ 4

можно связать компонент, который нужно сжать с помощью события жеста. например,

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

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