使用 Phonegap 和 jQUERY Mobile 在 Android 中缩放

Question

在我使用 Phonegap 创建的 web 应用程序中，我一直很难让捏缩放工作。目前，我正在将信息加载到远程脚本的 p 标记视图中，但是 html 超出了屏幕的范围（当然，进入横向模式可以解决这个问题）。

没关系，我尝试什么都无法让捏缩放工作，甚至无法出现水平滚动条。我尝试在标题中添加 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

我知道这篇文章已经过时了，但这里是给其他任何通过谷歌搜索进入该帖子的人：

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

至于缩小到比实际内容更远的地方，我认为它实际上会锁定你是不合理的。身体之外没有任何东西可以显示，想象一下背景颜色或图像将如何被剪裁 - 不太好全部！

Answer 2

使用 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”标头 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);    
        }
    }

res/drawable/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/drawable/splashimage.png （使用 Draw 9-patch 来自启动器图标 png w/alpha）

Answer 3

可以用手势事件绑定要捏合的组件。 例如

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

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