Question

我一直难以在我使用Phonegap创建的webapp中使用缩放缩放功能。目前，我正在将信息加载到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); 

}
}

source

Answer 1

我意识到这篇文章已经过时了，但其他任何人都可以通过Google搜索帖子：

水平缩放实际上不适用于身体以外的任何内容 - 据我所知，对于iOS和Android都是如此。尝试使用div创建一个新应用，并尝试让overflow:auto给你任何东西。 ScrollView正在jQuery Mobile中实现，还有iScroll。如果您希望表单元素位于可滚动区域内，则两者都不能正常工作。

至于缩小比实际内容更远的距离，我并不认为它实际上锁定了你是不合理的。身体外面没有任何东西可以显示，想象一下背景如何颜色或图像会被剪裁 - 一点也不好！

Answer 2

对于手势相关的事情，请转到此链接

jgestures

尤其适用于Jquery Mobile

Answer 3

使用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”标题元名称=“视口”，则您的缩放比例会有所不同 - 因此请在所有页面中使用或不使用。

这是我的工作片段：

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 /抽拉/ 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 （使用来自启动器图标png w / alpha的Draw 9-patch制作）

Answer 4

可以完成用手势事件绑定要压缩的组件。 e.g。

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

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

使用Phonegap和jQUERY Mobile轻松缩放Android

4 个答案: