Веб-страница Windows Phone 8 не статична (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 мобильный разрыв

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

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

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

Спасибо.

2 9
css jquery windows-phone-8 jquery-mobile cordova

2 ответа:

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

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

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

body {
  overflow: hidden;
  -ms-user-select: none;
  -ms-content-zooming: none;
  -ms-touch-action: none;
}
4

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

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