Страница Windows Phone 8 WebView не статична (jQuery Mobile/PhoneGap)

Приносим извинения за двусмысленное название; однако я пытаюсь перенести наше приложение PhoneGap, которое отлично работает на Android и iOS, на Windows Phone 8 (написано на jQuery Mobile/JavaScript, HTML и CSS3).

Большая часть этого работала (хотя мне пришлось изменить пару битов, но это было ожидаемо). Одна из основных проблем, с которыми я сталкиваюсь на данный момент, заключается в том, чтобы заставить работать функциональность списка прокрутки нашего приложения и захват подписи (оба, я считаю, связаны). Я не слишком уверен, в чем проблема, но когда я прокручиваю/подписываю, вся страница перемещается моим пальцем, а отдельные элементы не воспринимают сенсорные события. Я использую iScroll, jQuery 1.7.2 и jQM 1.1.0; однако продолжайте читать, потому что функция прокрутки была работающей (функция подписи всегда была проблемой)!

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

jQuery Mobile Gap

Одна вещь, которую мне посоветовали сделать, это добавить следующий фрагмент CSS; и это решило проблему «зазора»:

@media screen and (orientation: portrait) {
    @-ms-viewport {
        width: 320px;
        user-zoom: fixed;
        max-zoom: 1;
        min-zoom: 1;
    }
}

JQuery Mobile Gap Fix

Однако это привело к тому, что функции прокрутки перестали отвечать. Вся страница перемещается вверх/вниз, но не элемент списка, что противоположно тому, что я хочу! Я попытался добавить следующее, но безуспешно:

-ms-touch-action: none;

Я добавил это в свой элемент div, который содержит страницу. Это остановило движение страницы вверх и вниз! Однако список остался без ответа. Однако, если я удалю оба этих класса CSS, функция прокрутки снова заработает, но это снова вызовет проблему с пробелами. Я считаю, что класс CSS viewport, безусловно, является правильным путем, но я не могу, на всю жизнь, заставить его работать так, как мне хотелось бы.

Если бы кто-то мог помочь, это было бы очень признательно.

Спасибо.


cordova jquery css jquery-mobile windows-phone-8
person keldar    schedule 27.02.2013    source источник
comment
Вы решили это?   -  person Rui Lima    schedule 07.05.2013
comment
возник такой же вопрос!   -  person Alex Tape    schedule 19.07.2013
comment
Можете ли вы опубликовать html и CSS для списка? Как я понял, вся страница перемещается вверх и вниз, но вы хотите, чтобы компонент списка прокручивался, верно?   -  person Carlos Ferreira    schedule 24.07.2013

Ответы (2)


arrow_upward
4
arrow_downward

Прежде всего, @-ms-viewport не поддерживает масштабирование, поэтому удалите свойства масштабирования, поскольку они будут генерировать ошибки синтаксического анализа. Поддерживаемые свойства перечислены здесь

Во-вторых, попробуйте добавить эти правила в свой CSS и используйте iScroll в своем центральном контейнере, как вы сказали, что делаете

@-ms-viewport{width:device-width;}

body {
  overflow: hidden;
  -ms-user-select: none;
  -ms-content-zooming: none;
  -ms-touch-action: none;
}
person Marco Pappalardo    schedule 23.09.2013

arrow_upward
1
arrow_downward

вы можете использовать это в своем css, и это исправит ваш нижний колонтитул.

[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}
person Tharindu    schedule 02.09.2013