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

【问题标题】：How to fix viewport scaling with JQuery Mobile on Android HDPI devices如何在 Android HDPI 设备上使用 JQuery Mobile 修复视口缩放
【发布时间】：2011-12-26 17:42:54
【问题描述】：

我发现 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"/>

【问题讨论】：

标签： android jquery-mobile

【解决方案1】：

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

页面 meta[name='viewport'] 内容，在 Activity 启动并加载第一页后：

初始值 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 的详细说明，定义视口目标密度部分)。

【讨论】：

【解决方案2】：

保持跨 Android 设备的屏幕尺寸一致性的最有效方法是更改加载您（网络）应用的 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 );
    }
}

【讨论】：

【解决方案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;
    }
}

【讨论】：