screen.width и screen.height разные значения в разных API / устройствах

Question

Редактировать: также происходит с $ ('body'). Width () и window.outerWidth

API 2.3.3 HVGA

До и после вращения устройство выводит одинаковую ширину экрана (320)

API 3.0 WXGA

Ширина и высота переключают каждое вращение, например

начинается с ширины экрана: 1280 высота экрана: 800 Я поворачиваю 90 теперь имеет screenWidth: 800 Screenheight: 1280

так что мне делать, если я хочу внести определенные изменения в повороты в соответствии с размерами и хотите настроить таргетинг на все API? Мне нужно значение, которое одинаково для всех устройств.

Редактировать: Для определенных вещей мне нужны значения в пикселях, а не в процентах. Вот почему я использую Javascript для расчета размера на основе ширины экрана. Это будет работать, поскольку ширина экрана также равна пикселям, и я могу сохранять пропорции. Но если иногда screen.width показывает текущую ширину, а другие нет, я не могу ее использовать ...

-> Дело в том, что я начал работать со слайдером, который использует абсолютную разметку и нуждается во всех значениях пикселей. Я не хочу переопределять ползунок, поэтому я решил динамически рассчитать размер изображений и весь макет, используя ширину экрана. И инициализировать ползунок с этими значениями.

обновление

Посмотрите здесь аналогичный подход к тому, что я пытаюсь сделать:

http://ryangillespie.com/phonegap.php#/phonegap.php?

Запись от 18 июня 2011 г. «Одно разрешение экрана, чтобы управлять ими всеми»

Я попробовал также с этим примером, скопируйте его в мой код. Но это тоже не работает. У window.outerWidth те же проблемы, что я описываю для screen.width (а также JQuery $ ('body'). width ()). Он работает до тех пор, пока устройство не вращается - он хорошо инициализируется. Но при первом повороте, в зависимости от устройства, у меня возникают проблемы. В некоторых это работает как ожидалось, в других это меняет значения, так что я получаю большую ширину в портретном режиме и короткую в альбомной ориентации, в других это дает постоянную ширину и высоту все время, в других это не вращается вообще ..

Answer 1

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

http://simonmacdonald.blogspot.com/2012/01/on-eight-day-of-phonegapping-multiple.html

Answer 2

Я использую медиа-запросы в двух моих приложениях PhoneGap. Нет JavaScript, кроме как в случай аномалий.

Например, «базовый» CSS может быть для ширины 320 и портрета, затем, используя каскадный эффект css :-), добавьте блоки вроде:

@ мультимедийный экран и (максимальная ширина: 480px) и (ориентация: портрет) {сделать вещи больше}

@ media all и (min-width: 800px) {сделать вещи еще больше}

С такими запросами в css-файлах моей ссылки (и устройства / os / phonegap обработка изменений ориентации) новые макеты происходят автоматически.

ПРИМЕЧАНИЕ. Все это я узнал, прочитав блог Саймона и предложенные им материалы.

Answer 3

По совпадению я обнаружил, что это работает:

$(window).resize(function() {
    updateScaling($('body').width());
}); 

Это всегда вызывается и проходит правильную ширину. Насколько я помню он тоже работает с screen.width

В updateScaling я вычисляю scalingFactor и корректирую свои элементы.

Я опробовал адаптивный CSS, медиа-запросы и т. Д., Но в какой-то момент это уже не имело смысла, потому что я все равно должен пересчитать границы UL ползунка на основе текущего слайда и новой ширины - и других вещей, нужен скрипт. Поэтому я все сделал с помощью скрипта.

Я удалил window.onorientationchange.

Answer 4

Я не знаю, как PhoneGap представляет для вас информацию, но для нативного приложения для Android вы обычно объявляете разные макеты и ресурсы изображения для разных плотностей дисплея и размеров / ширины экрана. Смотрите эту страницу для получения дополнительной информации: http://developer.android.com/guide/practices/screens_support.html