如何在Android HDPI设备上使用JQuery Mobile修复视口缩放

Question

我发现JQuery Mobile页面在MDPI设备上看起来很好（比如G1），但在HDPI设备上看起来非常小（比如三星Galaxy S）。

这是来自Android模拟器的图像，分辨率为320x480和160 dpi：

这是来自Android模拟器的图像，分辨率为480x800和240 dpi：

要查看不成比例，请将JQuery文本的大小与本机Android界面（时钟）的大小进行比较。

已编辑：屏幕截图采用以下视口设置：

<meta name="viewport" content="initial-scale=1, width=device-width, target-densitydpi=device-dpi"/>

Answer 1

从JQM版本1.1开始，缩放级别的黑客不再起作用，因为JQM禁用了缩放。

页面元[name ='viewport']内容，在活动开始并加载第一页后：

  

初始值 initial-scale = 1

     

JQM 1.0.1 initial-scale = 1

     

JQM 1.1.0 initial-scale = 1，maximum-scale = 1，user-scalable = no

所以解决方案是从meta [name ='viewport']内容中删除densitydpi = device-dpi，因为它阻止了android执行的“原生缩放”（请参阅​​http://developer.android.com/guide/webapps/targeting.html上的详细说明，定义视口部分目标密度）。

Answer 2

在Android设备上保持屏幕尺寸之间保持一致性的最有效方法是更改​​加载您（Web）应用的WebView的缩放级别。 它不需要在HTML级别进行代码更改。

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 );
    }
}

Answer 3

是的，你提到的设备的分辨率并不成比例，对吗？

即。 320:480与480:800

不同

该设备按比例放大了应用的宽度和高度，这会在高度组件中留下空白区域。

因此，这与 jQuery 无关，只是您的应用需要设计增强功能来支持高端设备。

我不知道你的要求是什么，但这就是我为我的应用解决这个问题的方法：

介绍有用的内容以填补高分辨率设备的高度。要在代码级别进行解释，我在ID为moreContentForHighEndDevices的div中添加了其他内容，并使用CSS媒体查询有条件地显示它，如下所示：

#moreContentForHighEndDevices {
    display:none;
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    #moreContentForHighEndDevices {
        display: block;
    }
}