Phonegap / HTML5 и проблема изменения размера экрана Android при повороте с пейзажа на портрет

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

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

Пейзаж ... Вращается ... и затем портретный вид

Я видел этот вопрос: Ориентация экрана Android: Пейзаж Вернуться к портрету … но, хотя принятый ответ может быть правдой, я не совсем уверен, что там просят.

У меня только макет / main.xml, который имеет конфигурацию по умолчанию:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout> 

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

  var viewPortHeight = $(window).height(); alert (viewPortHeight+" x "+$(window).width()); var headerHeight = $('div[data-role="header"]').height(); var footerHeight = 0; var contentHeight = viewPortHeight - headerHeight - footerHeight; // Set all pages with class="page-content" to be at least contentHeight $('div[class="page-content"]').css({'min-height': contentHeight + 'px'}); 

а также

  var devInfo = new DeviceInformation(); devInfo.setOrientation(0); time_column_count = Math.floor(viewport.height / 270); devInfo.setResolution({ height : $(window).width(), width : $(window).height() }); 

Но – без кубиков. Есть идеи?

ОБНОВИТЬ

Это только кажется проблемой на устройствах ICS – и на самом деле проблема с прокруткой в ​​ландшафтном режиме на устройствах, которые испытывают эту проблему. Прокрутка JQM используется для включения прокрутки на разных div.

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

1 – Убедитесь, что файл phonegap.js вызывается в заголовке html-файла

2 – Добавьте следующий метатег в заголовке html-страницы

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

3 – Добавить прослушиватель событий в onDeviceReady ()

 <script type="text/javascript"> function onDeviceReady() { document.addEventListener("orientationChanged", updateOrientation); } </script> 

4 – Если вы хотите добавить определенные изменения в ориентацию differnet, возможно, разные изображения, используйте аналогичную инструкцию switch

 function updateOrientation() { var e = window.orientation; switch(e) { case 0: // PORTRAIT break; case -90: // LANDSCAPE break; case 90: // LANDSCAPE break; default: //PORTRAIT break; } } 

5 – Добавьте следующий стиль после закрытия тега javascript

 <style> [data-role=page]{height: 100% !important; position:relative !important; top:0 !important;} </style> 

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

Спасибо, L & L Partners

Перейти к файлу манифеста:

Внутри действия добавьте следующие атрибуты:

 android:theme="@android:style/Theme.Translucent" 

Я бы согласился с более ранним комментарием по использованию метаданных viewport. Хотя я бы добавил, что вы также должны указать свою предполагаемую плотность пикселей для своего макета.

Одна вещь, которую я нашел неоценимой в разработке portait против lanscape на мобильных устройствах, – это использование запросов в формате CSS. Они позволят вам изменить стиль CSS элементов экрана в ландшафтном и портретном режимах без необходимости полагаться на javascript вообще.
Это также позволяет лучше управлять планированием смартфона и планшета.

У меня была та же проблема, но с платформой Intel xdk app с кордорой. Чтобы решить проблему, все, что я делал, это сделать новый проект, скопировать все, что у меня было в предыдущем, и перестроить кордову в нем. На этот раз я не добавил плагины через интерфейс, а только скопировал файлы конфигурации, которые были в моем предыдущем проекте. Как ни странно, это сработало, и теперь видовое окно прекрасно подстраивается. Поэтому я предполагаю, что это, вероятно, проблемы с версией или что-то в конфигурациях неверно.

Надеюсь, что это помогло.

PS извините за плохой английский

ОБНОВЛЕНИЕ Похоже, проблема возникла, когда я создал приложение. Чтобы решить проблему (на данный момент, поскольку это единственное решение), нужно сделать это.

 window.addEventListener('orientationchange', doOnOrientationChange); function doOnOrientationChange() { switch(window.orientation) { case -90: case 90: setTimeout(function(){ var ScreenHeight = screen.height; document.body.style.height = '100%'; window.innerHeight = ScreenHeight - (FOOTER HEADER);},100); break; default: var ScreenHeight = screen.height; document.body.style.height = "100%"; window.innerHeight = ScreenHeight - (FOOTER HEADER); break; } } 

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

Надеюсь, что это поможет 😀