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

Question

Я считаю, что страницы JQuery Mobile хорошо выглядят на устройствах MDPI (например, G1), но на устройствах HDPI (например, Samsung Galaxy S) они выглядят очень маленькими.

Здесь изображение с эмулятора Android с разрешением 320x480 и 160 точек на дюйм:

Вот изображение с эмулятора Android с разрешением 480x800 и 240 точек на дюйм:

Чтобы увидеть диспропорции, сравните размер JQueryтекст с размером собственного интерфейса Android (часы).

РЕДАКТИРОВАНИЕ: снимки экрана со следующими настройками области просмотра:

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

Answer 1

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

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

начальное значение начальная шкала = 1

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

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

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

Answer 2

Самый эффективный способ поддержания согласованности размеров экрана на устройствах Android - это изменение уровня масштабирования веб-приложения, загружающего ваше (веб-приложение).Не требует изменений кода на уровне 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 как таковым, просто для того, чтобы ваше приложение нуждалось в улучшении дизайна для поддержки устройств высшего класса.

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

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

#moreContentForHighEndDevices {
    display:none;
}

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