如何解决视使用jQuery Mobile在Android华电国际设备结垢 [英] How to fix viewport scaling with JQuery Mobile on Android HDPI devices

问题描述

我发现jQuery Mobile的网页好看MDPI设备（如G1），但它们看起来非常小的华电国际设备（如三星Galaxy S）。

I find that JQuery Mobile pages look good on MDPI devices (like G1) but they look extremely small on HDPI devices (like Samsung Galaxy S).

从Android模拟器在这里，图像和160分辨率小320x480 dpi的：

Here image from Android emulator with resolution 320x480 and 160 dpi:

从Android模拟器在这里，图像和240的分辨率480×800 dpi的：

Here image from Android emulator with resolution 480x800 and 240 dpi:

要看到的比例失调比较JQuery的文字的大小与原生的Andr​​oid界面（时钟）的大小。

To see disproportions compare size of JQuery text with size of native Android interface (clock).

编辑：抽放与下面的视口设置的截图：

EDITED: screenshots taked with the following viewport settings:

＆LT; META NAME =视CONTENT =初始规模= 1，宽=设备宽度，目标densitydpi =设备DPI/＆GT;

推荐答案

要保持整个Android设备的屏幕尺寸之间的一致性的最有效的方法是改变加载您（网络）应用程序中的web视图的缩放级别。 它不需要在HTML水平code的变化。

The most effective way to maintain consistency between screen sizes across Android devices is to change the zoom level of the WebView that loads you (web)app. It doesn't require code changes at HTML level.

public class YourApp extends DroidGap {
    /** Called when the activity is first created. */

    // declare the original size of the iPad app
    protected float ORIG_APP_W = 320;
    protected float ORIG_APP_H = 480;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        super.loadUrl("file:///android_asset/www/index.html", 3000);

        // get actual screen size
        Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
        int width = display.getWidth(); 
        int height = display.getHeight(); 

        // calculate target scale (only dealing with portrait orientation)
        double globalScale = Math.ceil( ( width / ORIG_APP_W ) * 100 );

        // make sure we're all good
        Log.v( TAG, "ORIG_APP_W" + " = " + ORIG_APP_W );
        Log.v( TAG, "ORIG_APP_H" + " = " + ORIG_APP_H );
        Log.v( TAG, "width" + " = " + width );
        Log.v( TAG, "this.appView.getMeasuredHeight() = " + height );
        Log.v( TAG, "globalScale = " + globalScale );
        Log.v( TAG, "this.appView.getScale() index=" + this.appView.getScale() );

        // set the scale
        this.appView.setInitialScale( (int)globalScale );
    }
}

这篇关于如何解决视使用jQuery Mobile在Android华电国际设备结垢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！