PhoneGap, jQuery Mobile и Retina Display - PullRequest
Новая
       23

PhoneGap, jQuery Mobile и Retina Display

5 голосов
/ 25 сентября 2011

Я работаю над приложением PhoneGap с использованием jQuery Mobile. В настоящее время я тестирую только на iPhone и iPhone Retina-симуляторах.

Когда я открываю приложение в режиме Retina, плотность приложения правильная, но страница составляет только половину размера экрана в обоих измерениях.

Я предполагаю, что css в jQuery Mobile не увеличивает ширину и высоту, но я не смог ничего найти по этому поводу.

Мой HTML имеет это: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

И затем я выполняю этот Javascript: 

if ($.mobile.media("screen and (min-width: 320px)")) {
    if ($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
        $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
    }
}

Чего мне не хватает?

Ответы [ 2 ]

1 голос
/ 11 октября 2011

Я думаю, вы догадались правильно.

Посмотрите на файл JQM.css.

Включает только медиазапросы для значков высокого разрешения / низкого разрешения. Все остальное «как есть» на устройствах с сетчаткой и без сетчатки, поэтому JQM поддерживает сетчатку только с точки зрения размера значка.

Указав initial-scale=.5, maximum-scale=.5, minimum-scale=.5, вы блокируете все на 50%. Итак, есть ваша немасштабируемая половина страницы.

Чем больше вы настраиваете устройства Retina («high-end»), тем больше проблем у вас будут со стандартными браузерами (особенно «low-end», такими как IE7). Например, проверьте позиционирование JQM iconsprite в IE7 - если вы не включите скрипт, такой как response.js , для поддержки медиазапросов, значки будут недоступны.

Я думаю, что в настоящее время устройств с сетчаткой просто недостаточно, чтобы обеспечить JQM кроссбраузерное решение для сетчатки и без сетчатки.

Я нашел здесь полезную информацию . Я также сделал CSS-only iOS tab-bar , которая работает вплоть до IE7.

Проверьте CSS, необходимый в моем плагине, чтобы иконки и градиентные фоны выглядели хорошо во всех браузерах, а также количество дополнительных CSS, необходимых для IE7 + 8. Файл Retina / non-retina JQM.css было бы неплохо иметь, но трудно загрузить: -)

0 голосов
/ 15 декабря 2012

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

...