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

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

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 делает это, но пока что это единственный способ найти эту ошибку.

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