PhoneGap не масштабируется должным образом между iPad и iPhone - PullRequest
Новая
       13

PhoneGap не масштабируется должным образом между iPad и iPhone

4 голосов
/ 28 сентября 2011

Я разработал приложение для iPad, используя PhoneGap 0.9.6. Кажется, работает нормально.

Основной элемент приложения имеет ширину 768 пикселей, поэтому масштабирование не является проблемой, так или иначе.

Теперь я экспериментирую с тем же на iPhone.

У меня есть этот метатег в верхней части моего HTML в разделе «head»: 

<meta name="viewport" content="user-scalable=no, width=device-width">

Кажется, что он отлично работает в браузере iPhone: я могу указать браузер на мой локально работающий сервер, страница масштабируется соответствующим образом, чтобы она помещалась на экране iPhone.

Если я сделаю версию страницы «Домашний экран», чтобы она была скорее веб-приложением (все еще не использующим PhoneGap), я все равно получу масштабирование, хотя теперь оно немного отклонено: изображение слишком широкое, маленькая полоска справа заводит за кадром.

Но когда я пробую что-то в Phonegap, у меня совсем не получается масштабирование. Страница всегда отображается с нормальным разрешением, поэтому я вижу только верхнюю ее четверть.

Я пробовал все следующее: * Изменение Summary-> Devices с iPad на Universal в настройках цели XCode. * Взлом с помощью виджета «Включить масштабирование отображения» на вкладке «Информация» элемента «Выполнить» на схеме для этой сборки. * Каждая перестановка трюка, которую я могу придумать для мета-тега 'viewport': установка минимального / максимального масштабирования, установка начального масштаба, установка ширины для фиксированных чисел и т. Д.

Для этого последнего элемента я вижу изменения, которые я отражаю в Браузере на iPhone (и версии HomeScreen), но PhoneGap никогда не сдвигается: у меня всегда один и тот же верхний правый угол. Я, кажется, не могу сделать этот шаг вообще.

Ответы [ 2 ]

0 голосов
/ 17 апреля 2012

Вы должны иметь возможность управлять масштабированием через HTML, добавив в файл PhoneGap.plist следующее:

EnableViewportScale: ДА

0 голосов
/ 02 февраля 2012

Подходящий способ размещения экрана iPhone - это не масштабирование и сжатие всей страницы, а использование масштабируемой структуры и стилей HTML для вашего приложения, например, используйте 100% вместо 768px.Вы всегда должны избегать масштабирования страницы.Вставьте эту строку в тег head: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

Лучше написать один и тот же CSS для iPhone и iPad, но если вы действительно хотите применить разные стили для каждого из них, вы можете использовать медиа-запросы, например, специфичный для ipad стиль выглядит следующим образом: 

<link rel="stylesheet" media="screen (max-device-width: 1024px)" href="ipad.css" />

Вы также можете назначить различные CSS-файлы для экрана с низким разрешением и экрана сетчатки.По-прежнему использовать медиа-запросы. 

<link href="static/iphone.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="static/retina.css"
    media="screen and (-webkit-device-pixel-ratio: 2)" />
...