0

jQuery Mobile サイトを表示する Web ビューを備えた Android アプリがあります。モバイル サイトは、デバイスのブラウザーでの動作と Web ビューでの動作が少し異なります。

このサイトでは、静的ヘッダーとパネルを使用しています。デバイスのブラウザーでは、これは通常、パネルが開いているときにヘッダーが左にスライドして機能します (以下を参照してください)。

ここに画像の説明を入力

ただし、アプリの Web ビューを介して読み込まれると、静的ヘッダーは画面の幅の 100% のままで、3 つのボタンのうちの最初のボタンを覆います (以下を参照してください)。

ここに画像の説明を入力

また、jQuery モバイルの応答は、アプリを使用するとグリッチ/スティッキーになり、デバイスのブラウザーを使用すると非常にスムーズになります。Web ビュー クラスのコードを以下に貼り付けました。

package com.example;

import com.example.R;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.webkit.GeolocationPermissions.Callback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;


class MyClient extends WebChromeClient {

    @Override
    public void onGeolocationPermissionsShowPrompt(String origin,
            Callback callback) {
        callback.invoke(origin, true, false);
    }
}

public class locationPage extends Activity {

    WebView webView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.embed);
        webView = (WebView) findViewById(R.id.webview);
        webView.setWebViewClient(new WebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        webView.getSettings().setGeolocationDatabasePath("/data/data/testWebClient");

        webView.requestFocus(View.FOCUS_DOWN);
        webView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                // TODO Auto-generated method stub
                return false;
            }
        });

        webView.loadUrl("http://www.example.com/mobile_site/index");

        webView.setWebChromeClient(new MyClient());

        @SuppressWarnings("unused")
        class HelloWebViewClient extends WebViewClient { 
            @Override 
            public boolean shouldOverrideUrlLoading(WebView view, String url) 
{ 
                view.loadUrl(url); 
                return true; 
            } 


    }
}
    public boolean onKeyDown(int keyCode, KeyEvent event) { 
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) { 
            webView.goBack(); 
            return true; 
        } 
        return super.onKeyDown(keyCode, event); 
}
}
4

1 に答える 1

0

HTML5 と css を使用しています。WebView を使用すると、ページの UI が完全に破壊されます。

画像の位置とズーム レベルの違い、および前述の静的メニューの違い。

$mobile.changePage 関数を使用してもページ リンクは機能しますが、ページが前後にちらつきます。Jquery ページのリンクを削除し、JQM を使用せずにページを動的に挿入する必要があるかもしれません。履歴が失われるため、これはブラウザーではお勧めできません。

動かない静的メニューは私の望ましい結果なので、WebView にはプラスです。webview によって提供されるフルスクリーンと同様に。

もう少し調査して、回避策が見つかったら投稿します。

これまでのところ、JQM のパフォーマンスは両方のシナリオで最悪であり、ローカル ストレージからデータを取得しています。性能はもっと上がると思っていたのに……。

于 2013-10-30T02:18:41.333 に答える