Масштабирование приложения Phonegap для разных размеров экрана/плотности экрана?

У меня есть приложение Phonegap, предназначенное для работы на телефонах и планшетах Android. Масштабы текста и изображений отлично смотрятся на телефоне, но слишком малы на 7-дюймовом планшете.

Есть ли способ установить масштаб для разных размеров экрана/плотности, который работает для приложения на основе Phonegap? Для родного приложения для Android было бы решением для нескольких экранных макетов (как указано в андроидных документах), но может ли это быть использовано для приложения на основе Phonegap?

Я мог бы использовать запросы мультимедиа CSS для установки размеров шрифтов на основе размера экрана, но я хочу пропорционально масштабировать весь интерфейс (включая изображения).

Я попытался использовать свойство CSS zoom вместе со мультимедийными запросами для целевых размеров экрана, но это устраняет абсолютное позиционирование и препятствует функции элементов пользовательского интерфейса, таких как iScroll:

@media only screen and (min-device-width : 768px) {
    body{
        zoom: 125%;
    }   
}
@media only screen and (min-device-width : 1024px){ 
    body{
        zoom: 150%;
    }
}

Я также попытался использовать свойство meta viewport targetdensity-dpi - настройка его на 120dpi делает масштаб лучше на 7-дюймовом планшете, но слишком большой на телефоне. Так как это жестко закодировано в HTML, а не в CSS, медиа-запросы не может использоваться для его изменения в зависимости от размера экрана:

<meta name="viewport" 
   content="width=device-width, initial-scale=1, targetdensity-dpi=120dpi">

Вот несколько скриншотов из приложения Phonegap для тестового приложения:

Ответ 1

Только что я не ответил на это. Решение, которое я использовал в конце, состояло в том, чтобы использовать медиа-запросы для явного задания размеров шрифтов и изображений на основе размера устройства. Тестирование устройств показало, что это работает на всех моих целевых устройствах: iPhone, iPad, Android-телефоны, Android 7 "планшеты, Android 10". Надеюсь, это поможет кому-то другому.

Например:

/* Start with default styles for phone-sized devices */
    p,li{
        font-size: 0.9em;
    }
    h1{
        font-size: 1.2em;
    }
    button{
        width: 24px;
        height: 12px;
    }
    button.nav{
        background-image: url('img/phone/nav.png');
    }

@media only screen and (min-device-width : 768px) { /* 7" tablets */
    p, li{
        font-size: 1.3em !important;
    }
    h1{
        font-size: 1.6em !important;
    }
    button{
          width: 32px;
          height: 16px;
    }
    button.nav{
        background-image: url('img/tablet7/nav.png');
    }
}
@media only screen and (min-device-width : 1024px) { /* 10" tablets and iPad */
    p, li{
        font-size: 1.5em !important;
    }
    h1{
        font-size: 1.8em !important;
    }
    button{
        width: 48px;
        height: 24px;
    }
    button.nav{
        background-image: url('img/tablet10/nav.png');
    }
}

Ответ 2

Прежде чем отказаться от телефонного звонка, попробуйте его улучшить. Я застрял, пока не решил, используя это решение.

Измените свой видовой экран на это:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

Ссылка: Телефонный текст и макет приложения слишком малы

Ответ 3

Считайте, что target-densitydpi устарела и удалена из Webkit в соответствии с Pete LePage (https://plus.google.com/+GoogleChromeDevelopers/posts/BKHdSgQVFBB), Я думаю, что лучший подход заключается в использовании медиа-запросов для таргетинга устройств с высокой пропускной способностью (dpi) перед тем, как сбросить телефонную трубку

Ответ 4

У меня есть несколько различных решений:

Динамическое изменение видового экрана с помощью Javascript (подробнее здесь)

Задайте все размеры в единицах rem, а не px. Затем вы можете масштабировать все, отрегулировав размер шрифта документа. Пример эскиза:

function resize() {
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
var styleSheet = document.styleSheets[0];
// ar = aspect ratio h/w; Replace this with your apps aspect ratio
var ar = 1.17;
// x = scaling factor
var x = 0.1; 
var rem;
if (h / w > ar) { // higher than aspect ratio
    rem = x * w;
} else { // wider than aspect ratio
    rem = x * h;
}
document.documentElement.style.fontSize = rem + 'px';
}