Как исправить масштабирование области просмотра с помощью JQuery Mobile на устройствах Android HDPI

Из JQM версии 1.1 хак с уровнем масштабирования больше не работает, потому что масштабирование отключено JQM.

Содержимое страницы meta[name='viewport'] после запуска активности и загрузки первой страницы:

начальное значение initial-scale=1

JQM 1.0.1 начальная шкала=1

JQM 1.1.0 начальный масштаб = 1, максимальный масштаб = 1, масштабируемый пользователем = нет

Таким образом, решение состоит в том, чтобы удалить плотность dpi=device-dpi из содержимого мета[name='viewport'], потому что это препятствует собственному масштабированию, выполняемому Android (см. подробное объяснение на http://developer.android.com/guide/webapps/targeting.html, раздел Определение целевой плотности области просмотра).

Самый эффективный способ обеспечить согласованность размеров экрана на устройствах 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 );
    }
}

Да, разрешения не пропорциональны устройствам, которые вы упомянули, верно?

т.е. 320:480 не то же самое, что 480:800

Устройство пропорционально увеличило ширину и высоту вашего приложения, что оставляет пустое место в компоненте высоты.

Так что это не имеет ничего общего с jQuery как таковым, просто ваше приложение нуждается в улучшении дизайна для поддержки устройств высокого класса.

Я не знаю, каково ваше требование, но вот что я сделал, чтобы решить эту проблему для своего приложения:

Добавьте полезный контент, чтобы заполнить высоту для устройств с высоким разрешением. Чтобы объяснить на уровне кода, у меня был дополнительный контент внутри div с идентификатором moreContentForHighEndDevices, и я использовал медиа-запросы CSS для его условного отображения, как показано ниже:

#moreContentForHighEndDevices {
    display:none;
}

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