PhoneGap, экранная клавиатура на iOS сдвигает мой контент

Question

PhoneGap, экранная клавиатура на iOS сдвигает мой контент

0

У меня есть приложение phonegap, базовый макет которого управляется переводом divs при нажатии некоторых элементов. Укороченная версия выглядит так:

HTML

<body>
    <h1 class="main">
        The Market Coffee Cart
    </h1>
    <div class="app">


        <div id="home" class="page">
            <p> Welcome to the market coffee cart</p>
            <!-- <div class="leftHalf"> Login</div> -->
            <div class="guestLogin"> Continue as Guest</div>
        </div>



        <!-- KIND -->
        <div id="itemType" class="page right">
            <p>What would you like to order?</p>
            <div id="coffee" class="type">
                Coffee
            </div>
            <div id="tea" class="type">
                Tea
            </div>
            <div id="others" class="type">
                Soda and specialties
            </div>
            <div id="snack" class="type">
                Snacks
            </div>
        </div>
  </body>

Css, который действительно отвечает за показ и скрытие вещей, выглядит так:

CSS

.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.page.left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.page.center {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.page.right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.page.transition {
    -webkit-transition: .25s;
    transition-duration: .25s;
}

Проблема, с которой я сталкиваюсь, заключается в том, что на некоторых моих страницах требуется ввод текста. Когда текстовое поле получает фокус, содержимое сдвигается влево, а мой макет разрушен. Смотрите фотографии. Как я могу это предотвратить?

ЗАМЕТКА

Я уже пробовал решения отсюда, и здесь, но они не имеют никакого эффекта. Они должны были добавить <preference name="KeyboardShrinksView" value="false"/> и <meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/> но это ничего не делает. Интересно, что все предостерегают от установки последнего свойства, но я все-таки попробовал, безрезультатно.

Вот как мне хотелось бы посмотреть:

и вот как он выглядит, как только клавиатура появилась (а затем скрыта сама):

Любые идеи очень приветствуются.

Startec 13 нояб. 2014, в 00:48

Источник

Теги:

html

css

ios

cordova