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

У меня возникла странная проблема с 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()
            });

но - без кубиков. Любые идеи здесь?

UPDATE

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

Ответы

Ответ 1

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

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

Ответ 2

Перейдите в файл манифеста:

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

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

Ответ 3

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

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

Ответ 4

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

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

P.S извините за плохой английский

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

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

Надеюсь, что это поможет:-D