Щепотка Увеличить в Android с PhoneGap и JQUERY Mobile - PullRequest
Новая
       6

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

11 голосов
/ 15 мая 2011

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

Неважно, что я пытаюсь, у меня не получается получить пинч-зум или даже горизонтальную полосу прокрутки. Я попытался добавить <<code>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); 

}
}

источник

Ответы [ 4 ]

1 голос
/ 28 декабря 2012

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

jgestures

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

1 голос
/ 20 января 2012

Я понимаю, что это сообщение старое, но вот кому еще нужно погуглить в этом сообщении:

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

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

0 голосов
/ 12 декабря 2012

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

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

con.addEventListener('gesturechange',function(e){
    if(e.scale>1)
    {
        //zoom in 
    }
    else if(e.scale<1)
    {
        //zoom out 
    }
});
0 голосов
/ 11 октября 2012

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

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

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

Получил # 2: Если вы используете мета-имя заголовка «target-densitydpi = device-dpi» = «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" />

Рез / рисуем / splashimage.png (Сделано с Нарисуйте 9-патч из значка запуска PNG с альфа-каналом)

...